Jquery實(shí)現(xiàn)視頻播放頁(yè)面的關(guān)燈開燈效果

更新時(shí)間：2013年05月27日 17:34:27 作者：

使用Jquery實(shí)現(xiàn)視頻播放頁(yè)面的關(guān)燈開燈效果。其中視頻顯示使用embed 元素，該元素是html5的元素，所以使用支持html5的瀏覽器效果會(huì)更好，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下

本示例使用Jquery實(shí)現(xiàn)視頻播放頁(yè)面的關(guān)燈開燈效果。其中視頻顯示使用embed 元素，該元素是html5的元素，所以使用支持html5的瀏覽器效果會(huì)更好。
效果預(yù)覽網(wǎng)址：http://www.keleyi.com/keleyi/phtml/guandeng/

完整代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>張國(guó)榮《千千闕歌》--腳本之家關(guān)燈特效</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(http://www.keleyi.com/keleyi/phtml/guandeng/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://www.keleyi.com/keleyi/phtml/guandeng/shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;} 
.turnedOff {color:#ffff00; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/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("關(guān)燈").removeClass("turnedOff"); 
else 
$(this).html("開燈").addClass("turnedOff"); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<h1>張國(guó)榮《千千闕歌》</h1> 
<h2>柯樂(lè)義關(guān)燈特效</h2> 
<div id="command"><img src="http://www.keleyi.com/keleyi/phtml/guandeng/click_here.png" alt="" id="clickHere" /><a class="lightSwitcher" href="javascript:void();">關(guān)燈</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  target="_blank" >可改變大小DIV層</a><br /> 
<a  target="_blank" >jquery使用ColorBox彈出圖片組瀏覽層</a><br /> 
<a  target="_blank" >jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層(版本2)</a><br /> 
<a  target="_blank" >jquery“收藏本頁(yè)”代碼</a><br /> 
<a  target="_blank" >柯樂(lè)義高級(jí)彈出菜單（可以有三級(jí)菜單）</a><br /> 
<a  target="_blank" >關(guān)燈特效原文</a> 
</p> 
</div> 
</div> 
<div id="shadow"></div> 
</body> 
</html> 