使用jQuery创建滑动图片/显示内容的效果（翻译）

不久前有人问我怎样来实现这种效果，所以我就写了这样一篇教程。由于我是第一次写这样的教程，还希望大家提出建议或批评哈。首先让我们看看要做些什么。

第一步

创建一个名为index.html的文件，在里面写上一些基本的html代码

<!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>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/style.css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<title>Untitled Document</title>

	<script type="text/javascript">
		$(function() {

		});
	</script>

</head>

<body>

	<div id="container">

	</div><!--end container-->

</body>
</html>

第二步

然后我们为这个html文件里添加一些内容代码，再去写css

<!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>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/style.css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<title>Untitled Document</title>

	<script type="text/javascript">
		$(function() {

		});

	</script>

</head>

<body>

	<div id="container">

		<div class="slideBox">
			<img src="images/picture1.jpg" alt="testing" />

			<div class="content">
				<h1>HTML Ipsum Presents</h1>
				<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
			</div>

			</div>
		</div><!--end slideBox-->

		<div class="slideBox">
			<img src="images/picture2.jpg" alt="testing" />

			<div class="content">
				<h1>HTML Ipsum Presents</h1>
				<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
			</div>

			</div>
		</div><!--end slideBox-->

	</div><!--end container-->

</body>
</html>

到了这一步，我们做了以下改变：

1.为内容片添加了一个类名为slideBox的div标签。这里使用类而不是id是因为同一页面里可能会多次用到这个效果。

2.在文字的上方加上了要使用到的图片

3.带有content类的div标签包覆住了文本，当图片滑动消失时这些文本就会出现。

现在看看我们做成了什么样子

呃……看起来不是很好看，但不要着急，我们等会儿会改变它

第三步

既然html已经做好了，那我们设计一下样式吧

body {
	font-family: Tahoma;
	font-size: 12px;
	color: #fff;
	line-height: 150%;
	background-color: #6081c4;
}

h1 {
	margin-bottom: 15px;
	font-size: 18px;
}

#container {
	width: 960px;
	margin:25px auto;
}

	div.slideBox {
		width: 325px;
		height: 325px;
		position: relative;
		float: left;
		margin-right: 25px;
		overflow: hidden;
		border: 5px solid #ccc;
	}

		div.slideBox img {
			position: absolute;
			z-index: 2;
			width: 325px;
			height: 325px;
		}

		div.slideBox div.content {
			position: absolute;
			z-index: 1;
			padding: 10px;
		}

代码说明：

1.从#container开始，先应用一个宽度（width）然后把containter容器居中，代码margin:25px auto;

2.诀窍在于为div.slideBox设置overflow:hidden;的属性，其他属性也没什么特别，除了position:relative，它能让子元素和父元素相互关联，这里是指div.slideBox这个父元素

3.对div.slideBox img使用绝对定位，并且指定z-index的值为2

4.最后为div.slideBox div.content使用绝对定位，指定z-index的值为1，把文字放到图片的下面

OK，已经完成了内容的格式化，我们继续下面的工作。

第四步

如果你仔细看了上面的html代码，你就会注意到，我已经加上了jQuery框架的调用代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jq的代码相当简单，如下

$(".slideBox").hover(function(){
	$(this).find("img").stop().animate({
		top:-325
	}, 500);
}, function(){
	$(this).find("img").stop().animate({
		top:0
	}, 500);
});

下面我解释一下代码的作用

1.首先检查鼠标是否在内容区域，如果在，我们就把图片向上移动325px

2.当鼠标移出区域时，我们把图片移到原来的地方

下面就是完成后index.html的所有代码

<!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>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/style.css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<title>Untitled Document</title>

	<script type="text/javascript">
		$(function() {
$(".slideBox").hover(function(){
	$(this).find("img").stop().animate({
		top:-325
	}, 500);
}, function(){
	$(this).find("img").stop().animate({
		top:0
	}, 500);
});
		});

	</script>

</head>

<body>

	<div id="container">

		<div class="slideBox">
			<img src="images/picture1.jpg" alt="testing" />

			<div class="content">
				<h1>HTML Ipsum Presents</h1>
				<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
			</div>

			</div>
		</div><!--end slideBox-->

		<div class="slideBox">
			<img src="images/picture2.jpg" alt="testing" />

			<div class="content">
				<h1>HTML Ipsum Presents</h1>
				<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
			</div>

			</div>
		</div><!--end slideBox-->

	</div><!--end container-->

</body>
</html>

DEMO | 下载完整范例

文本来源于How to create a sliding image/reveal content with jquery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

本文信息: 文章发布于2009年10月25日/trackback地址/收藏、分享这篇文章! /跳转到留言框

目前已经有 9 条回复，欢迎继续就座

walysclw

17:51@2009年10月25日 [回复]

代码高亮在html上,不错不错,是怎么生成的…(不要告诉我是记事本裸敲的)
ZH CEXO

20:19@2009年10月25日 [回复]

@walysclw:代码是别人敲的，高亮是一个插件的支持，名叫chenpress，基于FCKEditor
小墨

20:53@2009年10月25日 [回复]

很有用的代码学习了~过几天可能用的上
bwskyer

20:55@2009年10月25日 [回复]

看到代码就头痛, jQuery到现在自己从未玩过.
ZH CEXO

20:57@2009年10月25日 [回复]

@小墨:这些都是jQuery小技巧的文章，是sofish同学发起的合作翻译活动，所有文章在techmeme.org.cn上均有备份，感兴趣的话可以去注册，找我要邀请码~
Alex

22:23@2009年10月26日 [回复]

貌似最近比较多关注jQuery了，这功能不错，但在我的博客上就不知道怎么使用了。。
会律博客

23:09@2009年10月26日 [回复]

小子最近在学习JQ 倒是沉默！
别用鼠标点我

19:56@2009年10月27日 [回复]

1个月内，俺拒绝任何代码~~
ZH CEXO

09:48@2009年10月28日 [回复]

@Alex:我没有关注，因为我不懂，这是sofish发起的翻译56篇优秀的jq技巧的文章，我就译了几篇
@会律博客:我一直很沉默没发现？Silence is gold…
@别用鼠标点我:OK，想鼓捣的时候再上~

ZH CEXO’s BLOG

Search

使用jQuery创建滑动图片/显示内容的效果（翻译）

相关阅读

目前已经有 9 条回复，欢迎继续就座

Post a Comment

Recent Posts

Top Commentators

友情链接

Popular Posts