本篇日志由 小王 于 星期四 03-4, 2010 发布在 javascript. 标签:js, scrollTop, 滚动
这个滚动要先复制一下第一行的内容添在最后,然后滚动到最后的时候直接显示第一行的内容,当这最后一行是当前位置的时候,scrollTop等于0,跟原始第一行重叠,这样就没有晃动发生了,还有因为div本身有高度,li总高度虽然是200,但是scrollTop只有180,还不是特别清楚,继续研究
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>首页</title>
<meta name="keywords" content="首页" />
<meta name="description" content="首页" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<style type="text/css">
*{padding:0px;
margin:0px;
}
#div1 {
width:330px;
height:20px;
margin:100px;
overflow:hidden;
}
#notice {
height:20px;
line-height:100%;
font-size:14px;
}
#notice li {
height:20px;
line-height:100%;
}
</style>
</head>
<body>
<div id="div1">
<div id="notice">
<li><a href="#" target="_blank">3G互联，为您提供极速的互联网感受!0</a></li>
<li><a href="#" target="_blank">3G互联，1为您提供极速的互联网感受!1</a></li>
<li><a href="#" target="_blank">3G互联，2为您提供极速的互联网感受!2</a></li>
<li><a href="#" target="_blank">3G互联，3为您提供极速的互联网感受!3</a></li>
<li><a href="#" target="_blank">3G互联，4为您提供极速的互联网感受!4</a></li>
<li><a href="#" target="_blank">3G互联，5为您提供极速的互联网感受!5</a></li>
<li><a href="#" target="_blank">3G互联，6为您提供极速的互联网感受!6</a></li>
<li><a href="#" target="_blank">3G互联，7为您提供极速的互联网感受!7</a></li>
<li><a href="#" target="_blank">3G互联，8为您提供极速的互联网感受!9</a></li>
<li><a href="#" target="_blank">3G互联，9为您提供极速的互联网感受!10</a></li>
</div>
</div>
<span id="num">num</span>
<script>
function G(obj) {
if(obj) {
return document.getElementById(obj);
}
}
var div1 = G("div1");
var notice = G("notice");
var num = G("num");
num.innerHTML=div1.scrollTop;
notice.innerHTML+="<li>"+notice.getElementsByTagName("li")[0].innerHTML+"</li>";
function auto() {
if(div1.scrollTop>=200) {
div1.scrollTop=0;
}
autoloop = setInterval("play()",30);
}
var sn=0;
function play() {
if(sn<20) {
sn++;
div1.scrollTop++;
num.innerHTML=div1.scrollTop;
} else {
sn=0;
clearInterval(autoloop);
num.innerHTML=div1.scrollTop;
}
}
txtloop = setInterval("auto()",2000);
</script>
</body>
</html> |
暂时还没有评论.