参考妙味课堂的JS视频实现的一个百叶窗效果，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百叶窗效果</title>
<style>
body{background-color: #95e1e6;}
*{margin: 0;padding: 0;}
.box{width: 300px;height: auto;float: left;border-top: 1px solid #000;margin: 20px;}
.box li{width: 100%;height: 30px;overflow: hidden;position: relative;border-bottom: 1px dashed #333;line-height: 30px;}
.box li div{position: absolute;top: -30px;left: 0;}
.box li div p{height: 30px;}
</style>
</head>
<body>
<ul class="box" id="box1">
<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 class="box" id="box2">
<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 src="http://s.lamahui.com/jquery/jquery-2.1.1.min.js"></script>
<script>
$(function () {
var box1 = $(‘#box1‘),
box2 = $(‘#box2‘),
timeCh = 4000; // 变化时长
toShow(box1);
setTimeout(function () {
toShow(box2);
},timeCh/2);
function toShow(obj) {
var timer = null,
iNow = 0,
beChange = true,
aDiv = obj.find(‘div‘);
setInterval(function () {
toChange();
},timeCh);
function toChange() {
timer = setInterval(function () {
if (iNow === aDiv.length) {
clearInterval(timer);
iNow = 0;
beChange = !beChange;
} else {
aDiv.eq(iNow).stop().animate({
‘top‘ : beChange ? ‘0‘ : ‘-30px‘
})
iNow++;
}
},100);
}
}
});
</script>
</body>
</html>
有Bug，待完善。
时间： 2024-10-17 06:58:46