您的位置：首页 > Ajax > 看电影时请关灯——一个很酷的页面效果

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

神飞 发表于 24. May, 2009, 分类: Ajax , 14 条评论 »
标签： &
译自：jankoAtWarpSpeed
原文：看电影时请关灯——一个很酷的页面效果
版权所有，转载请注明出处，多谢！

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

VN:F [1.9.3_1094]
Rating: 7.1/10 (41 votes cast)
看电影时请关灯——一个很酷的页面效果, 7.1 out of 10 based on 41 ratings
作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。

您或许也会喜欢：

如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

14 个评论

发表评论