window.onload = function(){
var oGUN = document.getElementById("GUN") ;
var oUl1 = document.getElementById("ul1") ;
var oUl2 = document.getElementById("ul2") ;
oUl2.innerHTML = oUl1.innerHTML ;
oGUN.scrollTop = 0 ;
var timer = setInterval(scrollUp,50) ;
function scrollUp(){
if(oGUN.scrollTop >= oUl1.offsetHeight){
oGUN.scrollTop = 0 ;
}else{
oGUN.scrollTop++ ;
alert(oGUN.scrollTop);
}
}
}
2015-11-10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝信息滚动练习</title>
<style type="text/css">
*{margin:0;padding:0;}
#main{
width:300px;
height:200px;
background:#c0c0c0;
border:1px solid black;
overflow:hidden;
}
li{
font-weight:bold;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oGUN = document.getElementById("GUN") ;
var oUl1 = document.getElementById("ul1") ;
var oUl2 = document.getElementById("ul2") ;
oUl2.innerHTML = oUl1.innerHTML ;
var timer = setInterval(scrollUp,50) ;
oGUN.onmouseover = function(){
clearInterval(timer) ;
}
oGUN.onmouseout = function(){
timer = setInterval(scrollUp,50) ;
}
function scrollUp(){
if(oGUN.scrollTop >= oUl1.offsetHeight){
oGUN.scrollTop = 0 ;
}else{
oGUN.scrollTop++ ;
}
}
}
</script>
</head>
<body>
<div id="main">
<div id="GUN">
<ul id="ul1">
<li>知章骑马似乘船，眼花落井水底眠。</li>
<li>汝阳三斗始朝天，道逢麴车口流涎，</li>
<li>恨不移封向酒泉。左相日兴费万钱，</li>
<li>饮如长鲸吸百川，衔杯乐圣称避贤。</li>
<li>宗之潇洒美少年，举觞白眼望青天，</li>
<li>皎如玉树临风前。苏晋长斋绣佛前，</li>
<li>醉中往往爱逃禅。李白斗酒诗百篇，</li>
<li>长安市上酒家眠，天子呼来不上船，</li>
<li>自称臣是酒中仙。张旭三杯草圣传，</li>
<li>脱帽露顶王公前，挥毫落纸如云烟。</li>
<li>焦遂五斗方卓然，高谈雄辩惊四筵。</li>
</ul>
<ul id="ul2"></ul>
</div>
</div>
</body>
</html>举报
