<!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>
分享到：
相关推荐
页面开灯关灯效果的实现（一个按钮两种状态，主要是利用修改背景颜色来实现）
- **颜色亮度渐变**：开灯关灯效果实质上是控制像素的亮度变化。我们可以使用HSV（色相、饱和度、亮度）色彩模型来调整亮度，或者直接在RGB（红、绿、蓝）模型中增加或减少每个颜色通道的值。 - **动画帧**：为了...
在开灯关灯的应用中，我们可能会使用CSS来改变网页的整体背景色或文字颜色，以此模拟“开灯”和“关灯”的效果。例如，可以定义两个不同的CSS类，一个代表亮光模式，背景色为白色；另一个代表暗光模式，背景色为黑色...
《jQuery+CSS3实现黑夜开灯关灯动画特效解析》 在网页设计中，动态效果是提升用户体验的重要手段之一。本文将深入探讨如何利用jQuery和CSS3技术来创建一款独特的“黑夜开灯关灯”动画特效，使得网页在切换状态时，...
在网页设计中，为了提供更好的用户体验，特别是在观看视频时，许多网站会采用“关灯”或“开灯”效果。这种效果允许用户在观看视频时将网页其他部分暗化，焦点集中在视频上，减少视觉干扰。`jQuery`库提供了一个简单...
这个名为"jQuery点击开关按钮视频网站背景开灯关灯代码.zip"的压缩包提供了一套实现视频网站背景开灯关灯效果的jQuery代码。下面将详细介绍这个项目中的关键知识点。 首先，`jquery.allofthelights.css`是样式表...
css3+jQuery开灯关灯动画代码-haiyong.zip 是一个包含 CSS3 和 jQuery 实现的开灯关灯动画效果的代码资源包。该资源包提供了一种简单而优雅的方式来为网页元素添加开关灯效果，增强了用户体验和交互性。 适用人群：...
本文将深入探讨如何利用jQuery和CSS3实现一款极具创意的“黑夜开灯关灯”动画特效，该效果可以为网页增添独特的视觉体验。此特效主要涉及的文件包括HTML结构、CSS样式以及jQuery脚本，通过它们的协同工作，我们可以...
这篇文章将深入探讨“jQuery点击开关按钮视频网站背景...通过以上知识点的综合运用，我们可以创建一个功能完善的视频网站背景开灯关灯功能，提升用户体验。理解并掌握这些技术对于任何Web开发者来说都是重要的技能。
在这个名为"js+css3灯泡开关开灯关灯黑白切换特效.zip"的压缩包中，我们可以看到一个利用JS和CSS3实现的灯泡开关动画，以及黑白切换的效果。下面将详细介绍这一特效的实现原理和关键知识点。 首先，我们关注的是...
在Android开发中，小项目“Tb开关灯效果”是一个典型的用户界面交互示例，它利用了ToggleButton控件来模拟现实生活中的开灯关灯动作。这个项目的核心在于理解和使用ToggleButton，以及处理其状态改变事件，进而影响...
HTML5实现的关灯小游戏,请按下面开始按钮开始游戏,每关只能重置一次.本游戏由49盏灯所组成，共有两种状态,灯开的状态为黄色，关的状态为黑色，当按开始游戏按钮时，会模拟点亮一些灯当你把所有黄色的灯点为黑色，就...
2. **模拟开灯/关灯效果**： - 使用颜色过渡：通过改变Drawable的颜色透明度，可以实现从暗到亮的过渡。可以创建一个ColorDrawable，然后通过改变其alpha属性（0-255，0代表完全透明，255代表完全不透明）来模拟...
在开灯状态下，有笑脸的形状。在关灯状态下，会有小鬼移动。主要运用的是css技术，JavaScript只用了一个。适合刚刚入门的选手，欢迎指出问题。。
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。 效果预览网址：http://www.keleyi.com/keleyi/phtml/guandeng/ 完整...
除了上述步骤，还可以增加一些额外的功能，比如计分系统、游戏重置、动画效果等，以提升用户体验。在实际项目中，你可能还需要考虑性能优化，比如使用非阻塞的异步操作来处理大量灯泡的状态更新，以及利用缓存来减少...
为了提供良好的用户体验，我们还可以添加动画效果，比如当灯泡状态改变时，可以使用Core Animation来创建平滑的过渡。此外，可以设置游戏提示，如显示剩余步骤数，或者提供智能解决方案的提示。 最后，别忘了编写...
在本资源中，我们将探讨如何使用VC++6.0集成OpenGL来实现一个三维动态聚光灯的效果。 首先，要将OpenGL与VC++6.0结合，我们需要设置项目配置。创建一个新的Win32 Console Application，然后在项目属性中添加对...
7. **动画效果**：为了提升用户体验，可以添加动画效果，如灯泡开关时的闪烁，这需要利用Core Animation框架。 8. **用户交互**：提供重置游戏、提示功能，或者显示当前步数和总步数等互动元素。 9. **错误处理**...