Jquery實現視頻播放頁面的關燈開燈效果

2024-05-06 15:47:20

字體：大中小

來源：轉載

供稿：網友

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

本示例使用Jquery實現視頻播放頁面的關燈開燈效果。其中視頻顯示使用embed 元素，該元素是html5的元素，所以使用支持html5的瀏覽器效果會更好。
效果預覽網址：

完整代碼：

復制代碼代碼如下:

<!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>張國榮《千千闕歌》--腳本之家關燈特效</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();
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(); position:absolute; left:0; top:0; width:100%; z-index:100;}
.turnedOff {color:#ffff00; background-image:url();}
#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("關燈").removeClass("turnedOff");
else
$(this).html("開燈").addClass("turnedOff");
});
});
</script>
</head>
<body>
<div>
<div>
<h1>張國榮《千千闕歌》</h1>
<h2>柯樂義關燈特效</h2>
<div><img src="http://www.keleyi.com/keleyi/phtml/guandeng/click_here.png" /><a href="javascript:void();">關燈</a></div>
</div>
<div>
<embed src="http://player.youku.com/player.php/sid/XMjE1ODgyMTU2/v.swf" quality="high" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>
</div>
<div>
<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實現可拖動的浮動層(版本2)</a><br />
<a target="_blank" >jquery“收藏本頁”代碼</a><br />
<a target="_blank" >柯樂義高級彈出菜單（可以有三級菜單）</a><br />
<a target="_blank" >關燈特效原文</a>
</p>
</div>
</div>
<div></div>
</body>
</html>