<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>文字列表无缝滚动</title>
<style>
body,ul,li {margin:0;padding:0;}
ul {list-style:none;}
.list {width:250px;height:300px;position:relative;margin:50px auto;overflow:hidden;background-color:#f60;color:#fff;border:1px solid #f40;border-radius:3px;}
.list ul {width:100%;position:absolute;top:0;left:0;}
.list li {height:35px;padding:0 20px;margin:0 10px;border-top:1px solid #f70;border-bottom:1px solid #f50;font:14px/35px Microsoft Yahei;}
</style>
</head>
<body>
<div id="list" class="list">
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
var $list = $("#list");
var $ul = $list.find("ul");
$ul.append($ul.html());
var height = parseInt($ul.height());
var timer = null;
var i = 0;
function marquee(){
i--;
if (-i >= height/2){
i = 0;
}
$ul.css("top", i + "px");
}
timer = setInterval(marquee, 20);
$list.on({
mouseover: function(){
clearInterval(timer);
},
mouseout: function(){
timer = setInterval(marquee, 20);
}
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号