文字无限无缝滚动效果——和派孔明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100px;height:20px;margin:0 auto;overflow:hidden;}
#div1 li{width:100px;height:20px;line-height: 20px;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function() {
var oDiv = $("#div1");
var timer = null;
oDiv.mouseover(function() {
clearInterval(timer);
}).mouseout(function() {
timer = setInterval(function() {
scroll(oDiv);
},2000);
}).trigger("mouseout");
});
function scroll(obj) {
var oLi = obj.find("ul:first");
var lineHeight = oLi.find("li:first").height();
oLi.animate({
"margin-top": -lineHeight + "px"
},
500,
function() {
oLi.css({
"margin-top": "0px"
}).find("li:first").appendTo(oLi);
})
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><a href="javascript:;">111111111111</a></li>
<li><a href="javascript:;">222222222222</a></li>
<li><a href="javascript:;">333333333333</a></li>
<li><a href="javascript:;">444444444444</a></li>
<li><a href="javascript:;">555555555555</a></li>
</ul>
</div>
</body>
</html>
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
