FINGO
Sestdiena, 2025-07-05, 00:24:06
Vietnes izvēlne

Statistika

Login

Vietnes draugi
Dzivnieki

Meklēšana

[ Jaunas vēstules · Dalībnieki · Foruma noteikumi · Meklēšana · RSS ]
  • Lappuse 1 no 1
  • 1
Gaismas izslēgšana mājaslapā, aptumšojot nevajadzīgo saturu
gatis88Date: Pirmdiena, 2010-09-06, 16:24:00 | Message # 1
Ģenerālisimuss
Group: Administrators
Messages: 152
Reputation: 2
Status:  :)
Šā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 :

Code
<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 :

Code
<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>

Avots: arnis.ucoz.lv

 
  • Lappuse 1 no 1
  • 1
Meklēšana:

Copyright MyCorp © 2025
Mājas lapu veidotājs - uCoz