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。基本测试能运行。
