Jquery realizes the effect of turning off the lights on the video playback page

Jquery realizes the effect of turning off the lights on the video playback page_jquery

WBOY

Release： 2016-05-16 17:33:08

Original

1845 people have browsed it

This example uses Jquery to achieve the effect of turning off the lights on the video playback page. The video display uses the embed element, which is an HTML5 element, so it will be better to use a browser that supports HTML5.
Effect preview URL: http://www.keleyi.com/keleyi/phtml/guandeng/

Full code:

Copy code The code is as follows:

 
 , Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;} <br>#container { width:960px; margin:0px auto; text-align:left; overflow:hidden ; position:relative;} <br>#movie_keleyi_com {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px; position:relative; z-index:102;} <br>#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;} <br>#command { position:relative; height:25px; display:block; margin: 25px 0 0 0;} <br>.lightSwitcher {position:absolute; z-index:101; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb_off.png); <br>background -repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;} <br>.lightSwitcher:hover {text-decoration:underline;} <br># shadow {background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index: 100;} <br>.turnedOff {color:#ffff00; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb.png);} <br>#clickHere {position: absolute; top: -25px; left:130px;} <br></style> <br><script src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min .js" type="text/javascript"></script> <br><script type="text/javascript"> <br>$(document).ready(function () { <br>$ ("#shadow").css("height", $(document).height()).hide(); <br>$(".lightSwitcher").click(function () { <br>$(" #shadow").toggle(); <br>if ($("#shadow").is(":hidden")) <br>$(this).html("Turn off the lights").removeClass("turnedOff "); <br>else <br>$(this).html("Turn on the light").addClass("turnedOff"); <br>}); <br>}); <br></script> <br></head> <br><body> <br><div id="container"> <br><div id="header"> <br><h1>Leslie Cheung> "Qian Qian Que Song"</h1> <br><h2>Ke Leyi's lights-off special effect</h2> <br><div id="command"><img src="http://www .keleyi.com/keleyi/phtml/guandeng/click_here.png" alt="" id="clickHere" /><a class="lightSwitcher" href="javascript:void();">Turn off the light< ;/a></div> <br></div> <br><div id="movie_keleyi_com"> <br><embed src="http://player.youku.com/player .php/sid/XMjE1ODgyMTU2/v.swf" quality="high" width="560" height="340" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application /x-shockwave-flash"></embed> <br></div> <br><div id="description"> <br><p></p> <br> <p></p> <br><p></p> <br><p><br /> <br><a href="http://www.keleyi .com/a/bjac/7e8897e5ec0849e9.htm" target="_blank" >Resizable DIV Layer</a><br /> <br><a href="http://www.keleyi .com/a/bjac/141932b419e08101.htm" target="_blank" >jquery uses ColorBox to pop up the picture group browsing layer</a><br /> <br><a href="http:// www.keleyi.com/dev/433ee98f4133d7b5.htm" target="_blank" >jQuery implements draggable floating layer (version 2)</a><br /> <br><a href= "http://www.keleyi.com/dev/7fd16e1b9849dba4.htm" target="_blank" >jquery "Bookmark this page" code</a><br /> <br><a href= "http://www.keleyi.com/a/bjac/1329fae4a4a54bdd.htm" target="_blank" >Keleyi advanced pop-up menu (can have three-level menu)</a><br /> </div> <br></div> <br><div id="shadow"></div> <br></body> <br></html> <br><br>