<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#movie {
border:solid 1px #dcdcdc;
background:#f00;
width:420px;
height:320px;
margin-left:350px;
top:120px;
position:absolute;
z-index:1000;
}
embed{width:400px;height:290px;margin:20px 10px 10px 10px;border:1px #dcdcdc solid}
.lightSwitcher, .turnedOff {
position:absolute;
background:url(f:/imgs/b.png) no-repeat 0 0;
padding:0;
text-indent:20px;
outline:none;
text-decoration:none;
zoom:1;
}
.lightSwitcher:hover {
text-decoration:underline;
}
#shadow {
background:#000;
position:absolute;
left:0;
top:0;
width:100%;
z-index:-1;
opacity:0.950;
filter: alpha(opacity = 80);
zoom:1;
}
.turnedOff {
color:#ff0;
background-position:0 -50px;
}
</style>
<script language="javascript" src="f:/study/jquery.js"></script>
<script language="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 style='left:300px;'>
<div id='ad'>
优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷
优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷优酷
</div>
<div id="movie">
<a class="lightSwitcher" href="#">关灯</a>
<embed src="http://www.epanel.com.cn/huodong/jdcj/flash/jiangpin.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</div>
<div id="shadow"></div>
</div>
</body>
</html>
分享到：
相关推荐
页面开灯关灯效果的实现（一个按钮两种状态，主要是利用修改背景颜色来实现）
实现一个开灯关灯特效
kaiguan.html，开灯关灯的简单应用，影视播放希望用得到哦。
jquery视频网站背景关灯开灯效果代码 jquery视频网站背景关灯开灯效果代码
Android小项目Tb开关灯效果，通过ToggleButton实现模拟开灯关灯效果。
这是一款视频网站在播放视频时设置背景关灯和开灯效果的jQuery点击开关按钮视频网站背景开灯关灯代码。
HTML5实现的关灯小游戏,请按下面开始按钮开始游戏,每关只能重置一次.本游戏由49盏灯所组成，共有两种状态,灯开的状态为黄色，关的状态为黑色，当按开始游戏按钮时，会模拟点亮一些灯当你把所有黄色的灯点为黑色，就...
在开灯状态下，有笑脸的形状。在关灯状态下，会有小鬼移动。主要运用的是css技术，JavaScript只用了一个。适合刚刚入门的选手，欢迎指出问题。。
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。 效果预览网址：http://www.keleyi.com/keleyi/phtml/guandeng/ 完整...
Android两种开关UI效果可用于App的开关设置，可代码中设置初始开关状态，监听开关状态改变
jQuery关灯效果视频插件
摘要:脚本资源,Ajax/JavaScript,开灯关灯特效,开关灯特效 Allofthelights.js是一款专门用于网页上的开关灯特效插件，开关灯特效代码，点击关灯、点击开灯的效果，见到好多视频网站都有这种效果，关灯以后，只有视频...
点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。 开灯： 关灯： 分析 这个功能很简单，其实就是利用jQuery实现把背景色更改为黑色和白色，可以在两者之间进行切换。 代码： <!DOCTYPE html> &...
斯柯达汽车产品宣传幻灯片基于jquery.easing.min.js、jquery.multiscroll.js和jquery-1.8.3.min.js等插件制作，全屏显示，鼠标滚轮滑动图片上下错位切换效果，有点击按钮，汽车开灯关灯，放倒座椅，竖起座椅的功能。
Android 演示开关灯效果，单击按钮后开灯，再次单击则关灯，很逼真的演示了开关灯特效，开灯后灯光点亮的效果很逼真哦。主要是添加按钮事件，改变图片的状态，设置程序状态的方法： public void setBulbState...
图片大视野提供在帖子有很多图片的时候，采用相册的模式浏览图片，并提供自动播放功能，以及开灯、关灯效果。
jQuery视频网站背景开关灯效果是一款视频网站预览时设置背景关灯和开灯效果代码。
JS倾斜3D开关按钮交互特效是一款基于js+css3制作的3D开关按钮开灯关灯切换效果。