1 <html>
2 <head>
3 <meta charset=utf-8 />
4 <script type="text/javascript">
5 /**
6 +-----------------------------
7 * @desc js 无缝滚动
8 * @date 2013年02月18日 22:32
9 +-----------------------------
10 */
11 function S(str_id,xy,speed){
12 var obj = null,time;
13 speed = typeof speed == 'string' || typeof speed == 'undefined' ? 30 : speed;
14 xy = typeof xy == 'undefined' ? 'x' : xy;
15 if(typeof str_id == 'string'){
16 obj = document.getElementById(str_id);
17 }else if(typeof str_id == 'object'){
18 obj = str_id;
19 }
20 var content = obj.innerHTML,
21 id = obj.getAttribute("id"),
22 obj_in = document.createElement("div"),
23 obj_1 = document.createElement("div"),
24 obj_2 = document.createElement("div");
25 obj.innerHTML = '';
26 obj.style.overflow = 'hidden';
27 obj_in.setAttribute("id",id+"_in");
28 obj_1.setAttribute("id",id+"_1");
29 obj_1.innerHTML = content;
30 obj_2.setAttribute("id",id+"_2");
31 obj_2.innerHTML = content;
32 if(xy == 'x'){
33 if(!+[1,]){
34 obj_1.style.styleFloat = 'left';
35 obj_2.style.styleFloat = 'left';
36 }else{
37 obj_1.style.cssFloat = 'left';
38 obj_2.style.cssFloat = 'left';
39 }
40 obj_in.style.width = "710%";
41 }else{
42 obj_in.style.height = '710%';
43 }
44 obj.appendChild(obj_in);
45 obj_in.appendChild(obj_1);
46 obj_in.appendChild(obj_2);
47 time = setInterval(function(){
48 Syd();
49 },speed);
50 function Syd(){
51 if(xy == 'x'){
52 if(obj_2.offsetWidth <= obj.scrollLeft)
53 obj.scrollLeft -= obj_1.offsetWidth;
54 else
55 obj.scrollLeft++;
56 }else{
57 if(obj_2.offsetHeight <= obj.scrollTop)
58 obj.scrollTop -= obj_1.offsetHeight;
59 else
60 obj.scrollTop++;
61 }
62 }
63 obj.onmouseover = function(){
64 clearInterval(time);
65 }
66 obj.onmouseout = function(){
67 time = setInterval(function(){Syd();},speed);
68 }
69 }
70 window.onload = function(){
71 new S('why','x',90);
72 new S('pa');
73 new S("wp",'y',40);
74 }
75 </script>
76 <style type="text/css">
77 *{font-size:12px;margin:0;padding:0;}
78 </style>
79 </head>
80 <body>
81 <div id="why" style="width:100px;">
82 <span>此生不换</span>
83 <span>秋意浓</span>
84 <span>爱要怎么说出口</span>
85 <span>你把我灌醉</span>
86 </div>
87 <div id="pa" style="width:71px;">
88 <span>生生世世</span>
89 <span>爱你一生</span>
90 <span>小不点</span>
91 <span>雪梨</span>
92 </div>
93 <div id="wp" style="height:80px;">
94 <p>百度一下，你就知道</p>
95 <p>360云盘</p>
96 <p>淘宝网</p>
97 <p>土豆</p>
98 <p>爱奇艺</p>
99 </div>
100 </body>
101 </html>
哎,今天调无缝滚动调伤心了,一个页面滚动的地方太多了,在网上找的基本上都是差不多,多使用几次,变量什么的都乱套了,抽时间看了下无缝滚动原理,写了个无缝滚动js。基本测试能运行。
来源：https://www.cnblogs.com/hxtgirq710/archive/2013/02/18/2916332.html