当前位置:

原生js之百叶窗效果

本文最后更新于2015-05-06,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共1317个字,读完预计4分钟。

今天在妙味课堂看到一种百叶窗效果,没有做过,便练习了一下。效果请点击下方result查看。

源码如下:

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
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>原生js之百叶窗效果练习</title>
	<style>
		body,ul{margin:0;padding:0;}
		li{list-style:none;}
		a{color:#666;text-decoration:none;}
		h2{text-align:center;}
		#list{width:280px;height:auto;background-color:#f2f2f2;border:1px solid #ccc;padding:10px;margin:30px auto auto;}
		#list li{width:100%;height:36px;line-height:36px;overflow:hidden;position:relative;border-bottom:1px dotted #ddd;}
		#list li:nth-child(10n){border-bottom:0 none;}
		#list div{width:100%;color:#666;position:absolute;top:-36px;-webkit-transition:.3s all;transition:.3s all;}
		#list div a{width:100%;height:36px;display:inline-block;-webkit-transition:.6s all linear;transition:.6s all linear;}
		#list div a:hover{text-indent:14px;}
	</style>
	<script>
		window.onload = function(){
			var list = document.getElementById('list'), listDiv = list.getElementsByTagName('div'), iNow = 0, lock = false, timer = null;
			setInterval(function(){
				clearInterval(timer);
				timer = setInterval(function(){
					if(iNow == listDiv.length){
						clearInterval(timer);
						iNow = 0;
						lock = !lock;
					}else{
						lock != false ? listDiv[iNow].style.top = '0px' : listDiv[iNow].style.top = '-36px';
						iNow++;
					}
				},100);
			},2500);
		}
	</script>
</head>
<body>
	<h2>原生js之百叶窗效果</h2>
	<ul id="list">
		<li>
			<div>
				<a href="#">这货是测试文字描述来了1</a>
				<a href="#">这货是测试文字描述来了2</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了3</a>
				<a href="#">这货是测试文字描述来了4</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了5</a>
				<a href="#">这货是测试文字描述来了6</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了7</a>
				<a href="#">这货是测试文字描述来了8</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了9</a>
				<a href="#">这货是测试文字描述来了10</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了11</a>
				<a href="#">这货是测试文字描述来了12</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了13</a>
				<a href="#">这货是测试文字描述来了14</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了15</a>
				<a href="#">这货是测试文字描述来了16</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了17</a>
				<a href="#">这货是测试文字描述来了18</a>
			</div>
		</li>
		<li>
			<div>
				<a href="#">这货是测试文字描述来了19</a>
				<a href="#">这货是测试文字描述来了20</a>
			</div>
		</li>
	</ul>
</body>
</html>
版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句