|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script language="javascript" type="text/javascript"> $(function () { var demo = $("#demo")[0]; var demo1 = $("#demo1")[0]; var demo2 = $("#demo2")[0]; var speed = 10; //滚动速度值，值越大速度越慢 var nnn = 200 / demo1.offsetHeight; for (i = 0; i < nnn; i++) { demo1.innerHTML += "<br />" + demo1.innerHTML } demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1 function Marquee() { if (demo2.offsetTop - demo.scrollTop <= 0) //当滚动至demo1与demo2交界时 demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端 else { demo.scrollTop++ } } var MyMar = setInterval(Marquee, speed); //设置定时器 demo.onmouseover = function () { clearInterval(MyMar) } //鼠标经过时清除定时器达到滚动停止的目的 demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) } //鼠标移开时重设定时器 }); </script></head><body><div align="center" id="demo" style="overflow:hidden;height:200px;600px;border:1px solid #000;"> <div id="demo1"> HTML5是一个丰富的应用，可以给用户很多视觉上的享受！ </div> <div id="demo2"></div></div></body></html> |
转自：https://my.oschina.net/guopengfei/blog/534891