- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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=gb2312" />
- <title>不間斷向上滾動代碼(無聊時用動態原型改寫的)</title>
- <script>
- <!--
- var i=0;
- function $(ID)
- {
- var obj=document.getElementById(ID);
- return obj;
- }
- function moveup(id,heigth)
- {
- this.id=id;
- $(this.id+2).innerHTML=$(this.id+1).innerHTML
- if(typeof(moveup._initialized=="undefined"))
- {
- moveup.prototype.move=function()
- {
- if($(this.id+2).offsetHeight-$(this.id).scrollTop<=0)
- {
- $(this.id).scrollTop-=$(this.id+1).offsetHeight;
- }
- else{
- $(this.id).scrollTop++;
- }
- }
- moveup._initialized=true;
- }
- }
- -->
- </script>
- <style>
- .demo{
- width:400px;
- height:20px;
- background:#FF0000;
- OVERFLOW: hidden;
- padding:0px;
- margin:0px;
- }
- .demo1{
- width:400px;
- padding:0px;
- margin:0px;
- }
- </style>
- </head>
- <body>
- <div id="demo" class="demo">
- <div id="demo1" class="demo1">
- 1<br />
- 2<br />
- 3<br />
- 4<br />
- 5<br />
- </div>
- <div id="demo2"></div>
- </div>
- <script>
- var rollspeed=100;
- var obj=new moveup("demo",25);
- var t=setInterval("obj.move()",rollspeed);
- $("demo").onmouseover=function() {clearInterval(t)}//鼠標移上時清除定時器達到滾動停止的目的
- $("demo").onmouseout=function() {t=setInterval("obj.move()",rollspeed)}//鼠標移開時重設定時器
- </script>
- </body>
- </html>
以上代碼只要把
if($(this.id+2).offsetHeight-$(this.id).scrollTop<=0)
{
$(this.id).scrollTop-=$(this.id+1).offsetHeight;
}
else{
$(this.id).scrollTop++;
}
裏的scrollTop改爲scrollLeft
offsetHeight改爲offsetWidth就可以改爲向左或向右滾動了