分享一个用原生JS实现的百叶窗特效，效果如下：
代码实现如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现文章目录百叶窗特效</title>
<style>
* {
margin: 0;
padding: 0;
}
#left,
#right {
width: 300px;
height: auto;
float: left;
border-top: 1px #000000 solid;
margin: 20px;
background-color: purple;
}
li {
list-style: none;
width: 100%;
height: 30px;
overflow: hidden;
position: relative;
border-bottom: 1px #333333 dashed;
line-height: 30px;
}
li div {
position: absolute;
top: -30px;
}
li p {
height: 30px;
color: #fff;
padding-left: 10px;
}
</style>
</head>
<body>
<ul id="left">
<li>
<div>
<p>生活没有彩排，每天都是现场直播！</p>
<p>如果那两字个没有颤抖，我不会难受。</p>
</div>
</li>
<li>
<div>
<p>挡不住的青春，曾经有过多少惆怅？</p>
<p>开始的开始，我们都是孩子。</p>
</div>
</li>
<li>
<div>
<p>最后的最后，渴望变成开使！</p>
<p>如果每一天都是生命中的最后一天。</p>
</div>
</li>
<li>
<div>
<p>众里寻她千百度，蓦然回首，那人却在...</p>
<p>生命是自己的画板，不要依赖别人着色。</p>
</div>
</li>
</ul>
<ul id="right">
<li>
<div>
<p>生活没有彩排，每天都是现场直播！</p>
<p>如果那两字个没有颤抖，我不会难受。</p>
</div>
</li>
<li>
<div>
<p>挡不住的青春，曾经有过多少惆怅？</p>
<p>开始的开始，我们都是孩子。</p>
</div>
</li>
<li>
<div>
<p>最后的最后，渴望变成开使！</p>
<p>如果每一天都是生命中的最后一天。</p>
</div>
</li>
<li>
<div>
<p>众里寻她千百度，蓦然回首，那人却在...</p>
<p>生命是自己的画板，不要依赖别人着色。</p>
</div>
</li>
</ul>
<script type="text/javascript">
function startMove(obj, json, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var end = true;
for (var attr in json) {
var current = 0;
if (attr == 'opacity') {
if (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) {
current = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
current = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
}
} else {
current = parseInt(getStyle(obj, attr)) || 0;
};
var speed = (json[attr] - current) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (current != json[attr]) {
end = false;
};
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (current + speed) + ')';
obj.style.opacity = (current + speed) / 100;
} else {
obj.style[attr] = current + speed + 'px';
};
}
if (end) {
clearInterval(obj.timer);
if (callback) {
callback.call(obj);
}
}
}, 30);
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
<script>
window.onload = function () {
// 获取左列表
var left = document.getElementById('left');
// 获取右列表
var right = document.getElementById('right');
// 调用函数让左边显示
toShow(left);
// 设置定时器，两秒钟后显示右边,两秒钟为单边发生变化时长的一半
setTimeout(function () {
toShow(right);
}, 2000);
function toShow(obj) {
// 获取所有的div
var divList = obj.getElementsByTagName('div');
// 设定变化从第几个开始
var current = 0;
// 初始化从上到下依次变化的定时器
var timer = null;
// 设置一个开关，切换一上一下的变化
var end = true;
// 设置定时器，从向到下或是从下到上4秒钟完成一次
setInterval(function () {
toChange();
}, 4000);
function toChange() {
timer = setInterval(function () {
// 如果当前变化的是最后一个
if (current == divList.length) {
// 清除定时器
clearInterval(timer);
// 变化起始div的下标归零
current = 0;
// 将当前运动的状态取反
end = !end;
}else if (end) {
// 调用的运动函数，传入元素，修改位置,向下
startMove(divList[current],{ top: 0 });
// 执行完累加
current++;
}else {
// 调用运动函数,传入元素，修改位置,向上
startMove(divList[current], { top: -30 });
// 执行完累加
current++;
}
}, 100);
}
}
};
</script>
</body>
</html>
