分享一个用原生JS实现的百叶窗特效，效果如下：
代码实现如下，欢迎大家复制粘贴。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现文章目录百叶窗特效</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#ul1,
#ul2 {
width: 300px;
height: auto;
float: left;
border-top: 1px #000000 solid;
margin: 20px;
background-color: purple;
}
li {
width: 100%;
height: 30px;
overflow: hidden;
position: relative;
border-bottom: 1px #333333 dashed;
line-height: 30px;
}
li div {
position: absolute;
top: -30px;
}
li div p {
height: 30px;
color: #fff;
padding-left: 10px;
}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function () {
//获取列表ul1
var oUl = document.getElementById('ul1');
//获取列表ul2
var oUl2 = document.getElementById('ul2');
//调用函数让ul1显示
toShow(oUl);
//设置定时器，两秒钟后显示ul2,两秒钟为单个ul发生变化时长的一半
setTimeout(function () {
toShow(oUl2);
}, 2000);
function toShow(obj) {
//获取所有的div
var aDiv = obj.getElementsByTagName('div');
//设定变化从第几个开始
var iNow = 0;
//初始化从上到下依次变化的定时器
var timer = null;
//设置一个开关，切换一上一下的变化
var bBtn = true;
//设置定时器，从向到下或是从下到上4秒钟完成一次
setInterval(function () {
toChange();
}, 4000);
function toChange() {
timer = setInterval(function () {
//如果当前变化的div是所有变化div的最后一个
if (iNow == aDiv.length) {
//清除定时器
clearInterval(timer);
//变化起始div的下标归零
iNow = 0;
//将当前运动的状态取反
bBtn = !bBtn;
}
else if (bBtn) {
//调用move.js里面的运动函,传入元素，修改位置,向下
startMove(aDiv[iNow], { top: 0 });
//执行完上一个然后执行下一个，累加
iNow ;
}
else {
//调用move.js里面的运动函,传入元素，修改位置,向上
startMove(aDiv[iNow], { top: -30 });
//执行完上一个然后执行下一个，累加
iNow ;
}
}, 100);
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<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="ul2">
<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>
</body>
</html>下面是以上代码中引入的运动函数move.js的代码：
代码语言：javascript复制// move.js
function startMove(obj, json, endFn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bBtn = true;
for (var attr in json) {
var iCur = 0;
if (attr == 'opacity') {
if (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
}
} else {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) {
bBtn = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' (iCur iSpeed) ')';
obj.style.opacity = (iCur iSpeed) / 100;
} else {
obj.style[attr] = iCur iSpeed 'px';
}
}
if (bBtn) {
clearInterval(obj.timer);
if (endFn) {
endFn.call(obj);
}
}
}, 30);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
