实现列表元素向上依次滚动，底部能无缝连接，实现一个动画效果。当鼠标停留在某一个元素上，停止滚动，移开鼠标，继续滚动
html代码：
<body>
<div id="div1">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
<li>西瓜</li>
<li>梨子</li>
<li>李子</li>
<li>火龙果</li>
<li>葡萄</li>
<li>芒果</li>
<li>圣女果</li>
<li>橙子</li>
</div>
</body>
css代码：
<style>
*{margin: 0px;padding: 0px;}
#div{
height: 200px;
width: 200px;
border: 1px solid #ccc;
}
#div1{
height: 230px;
width: 200px;
border: 1px solid #ccc;
margin: 20px auto;
padding-top: 0px;
overflow: hidden;
}
#div1 li{
list-style: none;
padding-left: 6px;
border-bottom: 1px dashed #ccc;
}
</style>
JS代码：
<script>
var marginTop = 0; //上外边距
var isStop = false;
//定时函数，每200毫秒执行一次
setInterval(function(){
if(isStop)
return; //动画是执行还是停止
$("#div1 li:first").animate({ //第一个li执行动画
marginTop:marginTop-- //设置上面的外边距自减
},0,function(){ //动画之后 执行的函数
var $f = $(this);
if(-marginTop == $(this).height()+1){ //判断li移动的距离是否超过自身的高度
$f = $(this).clone(true); //复制一个li
$(this).remove(); //把第一个移除。如果第一个移除，那么第二个就自动第一个了
marginTop=0;
$f.css("margin-top","0px");
$("#div1").append($f); //把第一个又追加到列表的最后，变成一个无缝连接
}
});
},150);
$(function(){
$("#div1 li").hover(
function(){isStop=true;},
function(){isStop=false;}
);
});
</script>
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
