本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素,该元素是html5的元素,所以使用支持html5的浏览器效果会更好。 效果预览网址:http://www.keleyi.com/keleyi/phtml/guandeng/ 完整代码: 复制代码 代码如下: 张国荣《千千阙歌》--脚本之家关灯特效 <BR>body {font-family:Arial, 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> <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("关灯").removeClass("turnedOff"); <BR>else <BR>$(this).html("开灯").addClass("turnedOff"); <BR>}); <BR>}); <BR> 张国荣《千千阙歌》 柯乐义关灯特效 关灯 可改变大小DIV层 jquery使用ColorBox弹出图片组浏览层 jQuery实现可拖动的浮动层(版本2) jquery“收藏本页”代码 柯乐义高级弹出菜单(可以有三级菜单) 关灯特效原文