开灯关灯java script_Jquery实现视频播放页面的关灯开灯效果

最新推荐文章于 2021-11-09 22:43:14 发布

大豆小米

最新推荐文章于 2021-11-09 22:43:14 发布

阅读量271

点赞数

文章标签：开灯关灯java script

本文链接：https://blog.csdn.net/weixin_36162883/article/details/114245589

版权

本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。

效果预览网址：http://www.keleyi.com/keleyi/phtml/guandeng/

完整代码：

张国荣《千千阙歌》--脚本之家关灯特效

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;}

$(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");

});

关注

张国荣《千千阙歌》