脚本宝典收集整理的这篇文章主要介绍了js实例教程-Jquery实现视频播放页面的关灯开灯效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
本示例使用jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是htML5的元素，所以使用支持html5的浏览器效果会更好。
完整代码如下:
<!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="https://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(https://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(https://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(https://www.keleyi.com/keleyi/phtml/guandeng/light_bulb.png);}
#clickHere {position:absolute; top: -25px; left:130px;}
</style>
<script src="https://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>
<p id="container">
<p id="header">
<h1>张国荣《千千阙歌》</h1>
<h2>柯乐义关灯特效</h2>
<p id="command"><img src=https://www.2cto.com/uploaDFile/2018/0427/20180427022712170.png" alt="" id="clickHere" /><a class="lightSwitcher" href="javascript：void();">关灯</a></p>
</p>
<p id=";movie_keleyi_com">
<embed src="https://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>
</p>
<p id="description">
<p></p>
<p></p>
<p></p>
<p><br />
<a href="https://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target="_blank" >可改变大小DIV层</a><br />
<a href="https://www.keleyi.com/a/bjac/141932b419e08101.htm" target="_blank" >jquery使用ColorBox弹出图片组浏览层</a><br />
<a href="https://www.keleyi.com/dev/433ee98f4133d7b5.htm" target="_blank" >jQuery实现可拖动的浮动层(版本2)</a><br />
<a href="https://www.keleyi.com/dev/7fd16e1b9849dba4.htm" target="_blank" >jquery“收藏本页”代码</a><br />
<a href="https://www.keleyi.com/a/bjac/1329fae4a4a54bdd.htm" target="_blank" >柯乐义高级弹出菜单（可以有三级菜单）</a><br />
<a href="https://www.keleyi.com/a/bjac/939631bb07adb4dc.htm" target="_blank" >关灯特效原文</a>
</p>
</p>
</p>
<p id="shadow"></p>
</body>
</html>
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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(https://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(https://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(https://www.keleyi.com/keleyi/phtml/guandeng/light_bulb.png);}
#clickHere {position:absolute; top: -25px; left:130px;}
</style>
<script src="https://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>
<p id="container">
<p id="header">
<h1>张国荣《千千阙歌》</h1>
<h2>柯乐义关灯特效</h2>
<p id="command"><img src=https://www.2cto.com/uploadfile/2018/0427/20180427022712170.png" alt="" id="clickHere" /><a class="lightSwitcher" href="javascript：void();">关灯</a></p>
</p>
<p id="movie_keleyi_com">
<embed src="https://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>
</p>
<p id="description">
<p></p>
<p></p>
<p></p>
<p><br />
<a href="https://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target="_blank" >可改变大小DIV层</a><br />
<a href="https://www.keleyi.com/a/bjac/141932b419e08101.htm" target="_blank" >jquery使用ColorBox弹出图片组浏览层</a><br />
<a href="https://www.keleyi.com/dev/433ee98f4133d7b5.htm" target="_blank" >jQuery实现可拖动的浮动层(版本2)</a><br />
<a href="https://www.keleyi.com/dev/7fd16e1b9849dba4.htm" target="_blank" >jquery“收藏本页”代码</a><br />
<a href="https://www.keleyi.com/a/bjac/1329fae4a4a54bdd.htm" target="_blank" >柯乐义高级弹出菜单（可以有三级菜单）</a><br />
<a href="https://www.keleyi.com/a/bjac/939631bb07adb4dc.htm" target="_blank" >关灯特效原文</a>
</p>
</p>
</p>
<p id="shadow"></p>
</body>
</html>
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-Jquery实现视频播放页面的关灯开灯效果全部内容，希望文章能够帮你解决js实例教程-Jquery实现视频播放页面的关灯开灯效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。