This example uses jquery to implement the turn off light effect on a video playback page. The video display uses the EMBED element, which is an element of HTML5, so it is better to use a browser that supports HTML5.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Leslie Cheung's Song "--the cloud habitat community lights off special effects </title>
<style type= "Text/css" >
Body {font-family:arial, sans-serif; font-size:13px; text-align:center; margin:0px; position:relative;}
#container {width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;}
#movie_keleyi_com {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px; position: relative; z-index:102;}
#description {float:left; width:320px;border:solid 1px #dcdcdc; padding:10px 20px;}
#command {position:relative; height:25px; display:block; margin:25px 0 0 0;}
. lightswitcher {position:absolute; z-index:101; Background-image:url (yun_qi_img/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 (yun_qi_img/shade1x1.png); Position:absolute left:0; top:0; width:100%; z-index:100;}
. Turnedoff {color: #ffff00; Background-image:url (yun_qi_img/light_bulb.png);}
#clickHere {position:absolute top: -25px; left:130px;}
</style>
<script src= "Http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js" type= "Text/javascript" ></script >
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#shadow"). CSS ("height", $ (document). Height ()). Hide ();
$ (". Lightswitcher"). Click (function () {
$ ("#shadow"). Toggle ();
if ($ ("#shadow"). Is (": Hidden"))
$ (this). HTML ("Turn off Light"). Removeclass ("Turnedoff");
Else
$ (this). HTML ("Turn on Light"). AddClass ("Turnedoff");
});
});
</script>
<body>
<div id= "Container" >
<div id= "Header" >
<div id= "command" ><a class=" Lightswitcher "href=" javascript:void (); > Turn off Lights </a></div>
</div>
<div id= "movie_keleyi_com" >
<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>
</div>
<div id= "description" >
<p></p>
<p></p>
<p></p>
<p><br/>
<a href= "http://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target= "_blank" > can change the size div layer </a><br/>
<a href= "http://www.keleyi.com/a/bjac/141932b419e08101.htm" target= "_blank" >jquery use Colorbox pop-up image group browse layer </a ><br/>
<a href= "http://www.keleyi.com/dev/433ee98f4133d7b5.htm" target= "_blank" >jquery implementation of the floating layer can be dragged (version 2) </a> <br/>
<a href= "http://www.keleyi.com/dev/7fd16e1b9849dba4.htm" target= "_blank" >jquery "collect this page" code </A><BR/ >
<a href= "http://www.keleyi.com/a/bjac/1329fae4a4a54bdd.htm" target= "_blank" > Collayi Advanced pop-up menu (can have level three menu) </a> <br/>
<a href= "http://www.keleyi.com/a/bjac/939631bb07adb4dc.htm" target= "_blank" > Turn off Light effects original </a>
</p>
</div>
</div>
<div id= "Shadow" ></div>
</body>
