看电影时请关灯——一个很酷的页面效果

YouTube 上的一些视频有个很酷的功能叫做”关灯”(Turn the lights down)。基本上来说，当你关灯，整个页面全部变黑，就像在电影院的效果一样。本教程将向你展示如何使用jQuery实现这个效果。

查看演示 下载源文件

问题

正如你在演示页面看到的那样，这个实例的结构是很简单的 – 它只包括头部、视频、“关灯”链接和侧栏。在下面的代码中你将看到包含了开关转换链接的“command”层，包含视频的”movie”层以及实现侧栏的”description”层 ：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="container"> <div id="header"> <h1>前端观察</h1> <h2>看电影时请关灯- 演示</h2> <div id="command"> <a class="lightSwitcher" href="#">关灯</a> </div> </div> <div id="movie"> <object width="420" height="363"> <param name="movie" value="http://www.tudou.com/v/kccxrpqN16w" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.tudou.com/v/kccxrpqN16w" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="420" height="363"></embed> </object> </div> <div id="description"> <p>一些描述或其它内容</p> </div> </div>

CSS代码也很简单:

1 2 3 4 5 6

body{font:13px "微软雅黑", Arial, Sans-Serif; text-align:center;margin:0;position:relative;} #container { width:960px; margin:0px auto; text-align:left; overflow:hidden;} #movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;} #description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;} .lightSwitcher {background:url(light_bulb.png) no-repeat 0 0; padding: 0;text-indent:20px; outline:none; text-decoration:none;} .lightSwitcher:hover {text-decoration:underline;}

让我们开始吧

当点击”关灯” 按钮时，我们需要将整个页面变黑——当然除了视频。这可以通过一个有半透明黑色背景的div来实现。这个div需要在它的相对定位（通常就是body）的容器内使用绝对定位，而且需要覆盖整个窗口——从左上角到右下角。

这样我们就需要在页面的最底部添加这个额外的div：

<div id="shadow"></div>

这个shadow层的样式可以这样写:

1	#shadow {background:#000;position:absolute;left:0;top:0;width:100%;z-index:100;opacity:0.80;filter: alpha(opacity = 80);zoom:1;}

这里最重要的是z-index. 为了让它覆盖到整个页面的上面，它需要最大的z-index。但是，不管怎么样，这个嵌入的Flash元素（视频代码） 将是不会被覆盖的。将一个div定位到顶部并将其设置为100%宽度是非常简单的，但是高度怎么办呢？如果我们将这个半透明层的高度设置为100%，那么它将只有与文档高度相同的高度——如果内容比较少或屏幕比较高，内容没有完全填充整个窗口，这个半透明的层将不能将整个页面盖住，或者，如果内容过多而出现滚动条，滚动下来的内容也将不会被盖住。

让我们用jQuery来搞定：

1 2 3

$(document).ready(function(){ $("#shadow").css("height", $(document).height()).hide(); });

该语句将该页面的真实高度赋值到#shadow上，并将其隐藏（当然你也可以将.hide()去掉，并在样式表里面将#shadow设置display:none）。

请注意：视频的属性设置不可以有<param name=”wmode” value=”opaque” />设置，否则，在IE6中，视频也将会被覆盖。——神飞注。

我们只希望当lightSwitcher层被点击的时候，shadow层才会显示，这样我们就需要一个点击处理程序来控制lightSwitcher：

1 2 3

$(".lightSwitcher").click(function(){ $("#shadow").toggle(); });

如果你现在就运行这个页面，你会发现它已经OK了。LightSwitcher 将会切换shadow 层为可视的——“灯已经关了”。唯一的不足是点击链接本身也在“黑暗中”，而且你将不能再次点击该链接了。

解决方法也是很简单的。LightSwitcher 必须有个比shadow层更大的z-index。为了实现这一点，这个层必须“绝对”定位到一个相对定位的并且z-index大于100的容器里面：

1 2	#command { position:relative; height:25px; display:block;} .lightSwitcher {position:absolute; z-index:102; background:url(light_bulb.png) no-repeat 0 0; padding: 0;text-indent:20px; outline:none; text-decoration:none;}

好了，现在可以了。

如果你看了演示，你可能会注意到，当你切换开关状态的时候，链接文字和图标也改变了。这也是通过CSS和jQuery来实现的。当你关灯以后，电灯泡图标和文字改变，文字颜色也变成了黄色。我们先定义关灯状态的链接样式：

1	.turnedOff {color:#ff0; background-position:0 -50px;}

扩展后的点击处理程序：

1 2 3 4 5 6 7

$(".lightSwitcher").click(function(){ $("#shadow").toggle(); if ($("#shadow").is(":hidden")) $(this).html("关灯").removeClass("turnedOff"); else $(this).html("开灯").addClass("turnedOff"); });

现在我们完全的实现了开关转换的功能了，最后，完整的代码将看起来是这样的:

CSS

1 2 3 4 5 6 7 8 9

body{font:13px "微软雅黑", Arial, Sans-Serif; text-align:center;margin:0;position:relative;} #container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;} #movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;} #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 ,.turnedOff{position:absolute; z-index:102;background:url(light_bulb.png) no-repeat 0 0; padding: 0;text-indent:20px; outline:none; text-decoration:none;} .lightSwitcher:hover {text-decoration:underline;} #shadow {background:#000;position:absolute;left:0;top:0;width:100%;z-index:100;opacity:0.80;filter: alpha(opacity = 80);zoom:1;} .turnedOff {color:#ff0;background-position:0 -50px;}

jQuery

1 2 3 4 5 6 7 8 9 10

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

注：本文原作者使用一个半透明的png图片平铺来实现#shadow层的半透明效果，也可以使用RGBa背景色来实现，我这里是利用背景色的半透明(opacity)来实现的，这三种方法在非IE浏览器中的效果是一致的。但是这三种方法在IE中都需要IE的专用滤镜来实现。经过测试，演示页面在IE各版本可以正常显示，但是对于IE6，由于IE6的诡异的z-index的bug，shadow层会完全盖住视频以外的所有内容，包括切换链接。

另外，由于最近YouTuBe被GFW墙了，我将原文链接的一个YouTuBe的视频更换为土豆的一个视频，该视频为Beyond的一首不太流行但是非常好听的歌曲《完全的爱吧》，希望大家能够喜欢。

转载于:https://www.cnblogs.com/liyazhou/archive/2010/02/13/1668018.html