42.翻页效果显示 var Scorll = new Function(){} 和 this.element.scorllTop

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <style type="text/css">
 4 #divMsg{
 5 line-height:20px;
 6 height:20px;
 7 overflow:hidden;
 8 }
 9 </style>
10 <script type="text/javascript">
11 var Scroll = new function(){
12     this.delay   = 2000;    //延迟的时间
13     this.height  = 20;      //行的高度
14     this.step    = 4;       //步长
15     this.curHeight= 0;
16     this.stimer  = null;
17     this.timer   = null; 
18     this.start   = function(){                  //开始翻页-调用move方法
19         this.move();
20     }
21     this.move  = function(){
22         var self = this;
23         if(this.curHeight == this.height)       //如果显示完一行
24         {
25             this.timer = setTimeout(function(){ //使用定时器-定时下一行的翻页时间
26             self.move();
27         }, this.delay);
28         this.curHeight = 0;
29         if(this.element.scrollTop >= this.element.scrollHeight - this.height){ //滚动信息已经完毕
30         this.element.scrollTop = 0;
31         }
32         return true;
33         }
34         this.element.scrollTop += this.step;
35         this.curHeight += this.step;
36         this.timer = setTimeout(function(){   //设置自动翻页定时器
37         self.move();
38         }, 30);
39     }
40     this.stop = function(){        //清除定时期，停止滚动翻页
41         clearTimeout(this.timer);
42     }
43 }
44 </script>
45 </head>
46 <body>
47 <div id="divMsg">
48     张三奥运会历史性的突破，拿到了男子100米金牌<br/>
49     奥运会历史上的首位8金得主<br/>
50     北京奥运会欢迎志愿者的参与<br/>
51     奥运会带来了什么样的商机<br/>
52     北京奥运会2008年举行<br/>
53     娱乐新闻请转到娱乐主页<br/>
54     今天又获得一枚金牌<br/>
55 </div><script type="text/javascript">
56 Scroll.element = document.getElementById('divMsg');
57 Scroll.start();
58 </script>
59 <input type="button" value="开始" onclick="Scroll.start()"/>
60 <input type="button" value="停止" onclick="Scroll.stop()"/>
61 </body>
62 </html>
posted on 2017-03-01 01:32 Sharpest 阅读(215) 评论(0) 收藏举报