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:
, 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>
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
