jQuery：仿迅雷首页热片滑动效果

分类:jQuery, 案例分享 发表时间:2009年06月30日 字体大小:12号14号

一直都很喜欢迅雷网站的设计，前端时间迅雷更新的主页的css风格，没了以前的tab效果，多了点变幻滑动的效果。
今天花了点时间，模仿了一下当前迅雷主页上的热点电视、电影的滑动效果：如下

模仿说明：

1. 因为时间的关系，没有花时间去解决ie6下图片透明的兼容；
2. 在兼容各浏览器编写时花费的时间较多，实现了多浏览器的兼容性，除了图片透明的问题（时间关系）；
3. 运用jQuery库对javascript进行编写；
4. 采用css sprite技术处理背景定位；
5. 计划实现自动播放效果。

代码说明：

一. CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

html,body,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
form,input,blockquote,fieldset,pre,
div,p,span,label,em,strong { margin:0; padding:0;}
body { background:#FFFFFF; font:normal 12px/20px Arial, Verdana, Lucida, Helvetica, simsun, sans-serif; color:#313131;}
ul { list-style:none;}
a { text-decoration:none;}
 
 
.huanying { width:468px; height:208px; position:relative; overflow:hidden;}
	.huanying h2 { height:27px; line-height:27px; background:url(images/pic.png) no-repeat; font-size:13px; color:#193b5f; padding:0 11px;}
	.huanying .content { border:1px solid #CCDFF2; border-top-width:0; width:466px; height:180px;}
 
	.movList { padding:10px 8px;}
		.movList ul { overflow:hidden; padding-left:8px; position:absolute; width:432px;}
		.movList ul#ul_hp_0 { left:10px;}
		.movList ul#ul_hp_1, .movList ul#ul_hp_2 { left:500px;}
		.movList ul li { float:left; width:92px; margin:0 8px;}
 
			/* ----- 封面 ----- */
			.movList ul li a.playpic { display:block; width:92px; height:127px; color:#fff; text-align:right; margin-bottom:3px; position:relative;}
			.movList ul li a.playpic img { padding:2px; border:1px solid #eae4d1;}
			.movList ul li a.playpic em { display:none;}
			.movList ul li a.playpic:hover em { display:block; width:31px; height:31px; background:url(images/pic.png) no-repeat -95px -28px; position:absolute; top:48px; left:30.5px;}
			/* ----- 集数 ----- */
			.movList ul li a.playpic span { display:block; width:86px; height:15px; line-height:15px; position:absolute; left:3px; bottom:3px;}
			.movList ul li a.playpic span.bg { background:url(images/pic.png) no-repeat -130px -28px;}
 
			/* ----- 标题和简短描述 ----- */
			.movList ul li p { width:100px; height:17px; line-height:17px; text-align:center; overflow:hidden;}
			.movList ul li p.mov-title { width:82px; padding-right:10px; position:relative;}
			.movList ul li p.mov-title a { color:#016a9f;}
			.movList ul li p.mov-title a:hover { text-decoration:underline;}
			.movList ul li p.mov-title a.playMov { display:block; position:absolute; width:16px; height:16px; right:0; top:0; background:url(images/pic.png) no-repeat -240px -28px;}
 
 
.list-pager { width:75px; height:18px; position:absolute; top:4px; right:11px;}
	.list-pager a { display:block; text-indent:-9999px;}
	/* ----- page-num ----- */
	.pager-num { width:33px; height:18px; float:left; overflow:hidden;}
		.pager-num a { height:6px; width:6px; background:url(images/pic.png) no-repeat -80px -28px; float:left; margin:6px 5px 0 0; overflow:hidden;}
		.pager-num a:hover { background-position:-80px -38px;}
		/* ----- selected ----- */
		.currentNum { background:url(images/pic.png) no-repeat -80px -38px!important;}
 
	/* ----- prev next ----- */
	.pager-op { float:right; width:36px; overflow:hidden;}
		.pager-op a { height:18px; width:18px; background:url(images/pic.png) no-repeat;}
		.pager-op a.page-up { float:left; background-position:-40px -28px;}
		.pager-op a.page-up:hover { background-position:0 -28px;}
		.pager-op a.page-down { float:right; background-position:-17px -28px;}
		.pager-op a.page-down:hover { background-position:-57px -28px;}

二. jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

/*
 * 时间关系，未修复IE6下图像透明的问题。
 */
 
$(document).ready(function() {
 
	//修复IE6的：hover
	$('.movList ul li a.playpic').hover(function() {
		$(this).children('em').css({'display': 'block'});
	}, function() {
		$(this).children('em').css({'display': 'none'});
	})
 
	var lenght = $('#div_hp_content ul').size();
	// currId->当前显示页， clickId->点击页面的标记
	var currId = 0, clickId = 0;
	// 获得需滑动的整体对象
	var $box = $('#div_hp_content ul');
 
	if(currId <= 0) {
		currId = 0;
	} else if (currId >= lenght - 1) {
		currId = lenght;
	}
 
	$('.pager-num a').click(function(event) {
		//获得当前点击对象的id值
		var index = $(this).attr('id');
		checkIndex(index);
 
		//判断当前点击页数，若当前点击页数大于当前显示页，向左滑动
		//若当前点击页数小于当前显示页，向右滑动
		//否则不进行任何操作
		if(clickId > currId) {
			$box.eq(currId).animate({'left':'-480px'}, 'slow')
						   .end().eq(clickId).animate({'left':'10px'}, 'slow');
 
		} else if(clickId < currId) {
			$box.eq(currId).animate({'left':'480px'}, 'slow')
						   .end().eq(clickId).animate({'left':'10px'}, 'slow');
 
		} else {
			return false;
		};
 
		//设置当前显示页标记等于点击的页数
		currId = clickId;
		changeSelected();
 
		event.preventDefault();
	});
 
	//上一页
	$('.page-up').click(function(event) {
		if(currId <= 0) {
			return false;
		};
		$box.eq(currId).animate({'left':'480px'}, 'slow')
					   .end().eq(currId - 1).animate({'left':'10px'}, 'slow');
		currId--;
		changeSelected();
 
		event.preventDefault();
	});
	//下一页
	$('.page-down').click(function(event) {
		if(currId >= lenght - 1) {
			return false;
		};
		$box.eq(currId).animate({'left':'-480px'}, 'slow')
					   .end().eq(currId + 1).animate({'left':'10px'}, 'slow');
		currId++;
		changeSelected();
 
		event.preventDefault();
	});
 
	//点击页数按钮检查index
	var checkIndex = function(index) {
		switch(index) {
			case 'a_hp_0':
			clickId = 0;
			break;
			case 'a_hp_1':
			clickId = 1;
			break;
			case 'a_hp_2':
			clickId = 2;
			break;
		};
	};
 
	//改变当前所选择的页数
	var changeSelected = function() {
		$('.pager-num a').removeClass('currentNum').eq(currId).addClass('currentNum');
	};
});

题外话：

呵呵，因为图片都是从迅雷网站上下载，有点小剽窃的感觉哦。不过，在这效果上有链接到迅雷相关电视、电影页面，也算给他做个小小的推广。大家就算扯平了吧。

你也许会喜欢阅读这些：

不错不错，已经有 个评论！
  1. Haven
    2009年07月6日 14:50 回复

    回访啦
    这效果不错，以后肯定会用到，先留个脚印

  2. huaimao
    2009年07月7日 13:59 回复

    偶用了啊！呵呵……..

  3. Alvin.J
    2009年07月9日 23:32 回复

    你的网站做得很漂亮！支持下~

  4. jason
    2009年07月31日 16:57 回复

    看来需要学的东西还很多，呵呵！！

  5. QQ:5069569
    2010年02月21日 08:49 回复

    呵呵 挺不错的 收下了~ 期待实现的五个功能 自动播放效果

  6. Firm
    2010年10月1日 10:35 回复

    相当的有感觉

我要评论

  • * *