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

译自:[jankoAtWarpSpeed](http://www.jankoatwarpspeed.com/post/2009/05/17/Use-jQuery-to-turn-off-the-lights-while-watching-videos.aspx) 原文:[看电影时请关灯——一个很酷的页面效果](http://www.qianduan.net/turn-off-the-lights-while-watching-videos-using-jquery.html) 版权所有,转载请注明出处,多谢!- - - - - -
YouTube 上的一些视频有个很酷的功能叫做”关灯”(Turn the lights down)。基本上来说,当你关灯,整个页面全部变黑,就像在电影院的效果一样。本教程将向你展示如何使用jQuery实现这个效果。 [查看演示](http://www.qianduan.net/demos/turn-off-light) [下载源文件](//www.qianduan.net/img/2009/05/turnOffLight.rar) ### 问题 正如你在演示页面看到的那样,这个实例的结构是很简单的 – 它只包括头部、视频、“关灯”链接和侧栏。在下面的代码中你将看到包含了开关转换链接的“command”层,包含视频的”movie”层以及实现侧栏的”description”层 :
一些描述或其它内容

CSS代码也很简单:

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:

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

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来搞定:

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

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

请注意:视频的属性设置不可以有设置,否则,在IE6中,视频也将会被覆盖。——神飞注。

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

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

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

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

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来实现的。当你关灯以后,电灯泡图标和文字改变,文字颜色也变成了黄色。我们先定义关灯状态的链接样式:

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

扩展后的点击处理程序:

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

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

CSS

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

$(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的一首不太流行但是非常好听的歌曲《完全的爱吧》,希望大家能够喜欢。