Admin
Admin
Number of posts : 262
Join date : 08.03.12
Age : 62
Dzīvesvieta : Talsi
 |  Tēma: Aptumšota lapa filmām2  Svētdena Novembris 25, 2012 7:30 am | |
| Šāds skripts ticis pielietots mājaslapās, kurās demonstrē filmas. Būtība sekojoša - lai ap pleijeri atrodošais saturs netraucētu filmas vērošanu, tas uz demonstrācijas laiku tiek "aptumšots". Tātad : 1) Šablonā, kurā izmantosiet šo efektu, tūlīt aiz body ievietojat sekojošo kodu : - Kods:
-
<style>
#container { width:600px; margin:0px auto; text-align:left; overflow:hidden; position:relative;} //
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}
#command { position:relative; height:25px; display:block; margin: 25px 0 0 0;}
.lightSwitcher {position:absolute; z-index:101; background-image:url(http://afraksti.ucoz.lv/exper/ligtoff/light_bulb_off.png);
background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {background-image:url(http://afraksti.ucoz.lv/exper/ligtoff/shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}
.turnedOff {color:#ffff00; background-image:url(http://afraksti.ucoz.lv/exper/ligtoff/light_bulb.png);}
#clickHere {position:absolute; top: -25px; left:130px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#shadow").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#shadow").toggle();
if ($("#shadow").is(":hidden"))
$(this).html("Izslēgt gaismu").removeClass("turnedOff");
else
$(this).html("Ieslēgt gaismu").addClass("turnedOff");
});
});
</script> 2) Vietā, kur jums atradīsies "Derīgais" saturs, kurš netiks aptumšots, ievietojat sekojošo : - Kods:
-
<div id="container"> <div id="command"><a class="lightSwitcher" href="#">Izslēgt gaismu</a></div> <div id="movie"> <!--Pleijera koda sākums --> ŠEIT ATRODAS PLEIJERA KODS VAI JEBKURŠ CITS SATURS, KAS NETIKS APTUMŠOTS <!--Pleijera koda beigas --> </div> </div> <div id="shadow"></div> | |
|
