转载地址:
http://www.cnblogs.com/cloudgamer/archive/2008/04/30/1177682.html

 


  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />  
  5. <title>JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)</title>  
  6. </head>  
  7. <body>  
  8. <script type=“text/javascript”>  
  9. var $ = function (id) {  
  10.     return “string” == typeof id ? document.getElementById(id) : id;  
  11. };  
  12.  
  13. var Class = {  
  14.   create: function() {  
  15.     return function() {  
  16.       this.initialize.apply(this, arguments);  
  17.     }  
  18.   }  
  19. }  
  20.  
  21. Object.extend = function(destination, source) {  
  22.     for (var property in source) {  
  23.         destination[property] = source[property];  
  24.     }  
  25.     return destination;  
  26. }  
  27.  
  28. function addEventHandler(oTarget, sEventType, fnHandler) {  
  29.     if (oTarget.addEventListener) {  
  30.         oTarget.addEventListener(sEventType, fnHandler, false);  
  31.     } else if (oTarget.attachEvent) {  
  32.         oTarget.attachEvent(“on” + sEventType, fnHandler);  
  33.     } else {  
  34.         oTarget[“on” + sEventType] = fnHandler;  
  35.     }  
  36. };  
  37.  
  38.  
  39. var Scroller = Class.create();  
  40. Scroller.prototype = {  
  41.   initialize: function(idScroller, idScrollMid, options) {  
  42.     var oThis = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);  
  43.       
  44.     this.SetOptions(options);  
  45.     this.Side = this.options.Side || [“up”];//方向  
  46.     this.scroller = oScroller;            //对象  
  47.     this.speed = this.options.Speed;    //速度  
  48.     this.timer = null;                    //时间  
  49.     this.pauseHeight = 0;                //定高  
  50.     this.pauseWidth = 0;                //定宽  
  51.     this.pause = 0;                        //定高(宽)  
  52.     this.side = 0;                        //参数  
  53.       
  54.     //用于上下滚动  
  55.     this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight;  
  56.     this.heightList = oScrollMid.offsetHeight;  
  57.       
  58.     //用于左右滚动  
  59.     this.widthScroller = parseInt(oScroller.style.width) || oScroller.offsetWidth;  
  60.     this.widthList = oScrollMid.offsetWidth;  
  61.       
  62.     //js取不到css设置的height和width  
  63.       
  64.     oScroller.style.overflow = “hidden”;  
  65.     oScrollMid.appendChild(oScrollMid.cloneNode(true));  
  66.     oScrollMid.appendChild(oScrollMid.cloneNode(true));  
  67.       
  68.     addEventHandler(oScroller, “mouseover”function() { oThis.Stop(); });  
  69.     addEventHandler(oScroller, “mouseout”function() { oThis.Start(); });  
  70.       
  71.     this.Start();  
  72.   },  
  73.   //设置默认属性  
  74.   SetOptions: function(options) {  
  75.     this.options = {
    //默认值  
  76.       Step:            1,//每次变化的px量  
  77.       Speed:        20,//速度(越大越慢)  
  78.       Side:            [“up”],//滚动方向:”up”是上,”down”是下,”left”是左,”right”是右  
  79.       PauseHeight:    0,//隔多高停一次  
  80.       PauseWidth:    0,//隔多宽停一次  
  81.       //当上下和左右一起使用时必须设置PauseHeight和PauseWidth来设置转向位置  
  82.       PauseStep:    1000//停顿时间(PauseHeight或PauseWidth大于0该参数才有效)  
  83.     };  
  84.     Object.extend(this.options, options || {});  
  85.   },   
  86.   //转向  
  87.   Turn: function() {  
  88.     //通过设置方向数组的排列来转向  
  89.     this.Side.push(this.Side.shift().toLowerCase());  
  90.   },  
  91.   //上下滚动  
  92.   ScrollUpDown: function() {  
  93.     this.pause = this.pauseHeight;  
  94.     this.scroller.scrollTop = this.GetScroll(this.scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight);  
  95.     this.pauseHeight = this.pause;  
  96.       
  97.     var oThis = this;  
  98.     this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);  
  99.   },  
  100.   //左右滚动  
  101.   ScrollLeftRight: function() {  
  102.     this.pause = this.pauseWidth;  
  103.     //注意:scrollLeft超过1400会自动变回1400 注意长度  
  104.     this.scroller.scrollLeft = this.GetScroll(this.scroller.scrollLeft, this.widthScroller, this.widthList, this.options.PauseWidth);  
  105.     this.pauseWidth = this.pause;  
  106.       
  107.     var oThis = this;  
  108.     this.timer = window.setTimeout(function(){ oThis.Start(); }, this.speed);  
  109.   },  
  110.   //获取设置滚动数据  
  111.   GetScroll: function(iScroll, iScroller, iList, iPause) {  
  112.     var iStep = this.options.Step * this.side;  
  113.       
  114.     if(this.side > 0){  
  115.         if(iScroll >= (iList * 2 – iScroller)){ iScroll -= iList; }  
  116.     } else {  
  117.         if(iScroll <= 0){ iScroll += iList; }  
  118.     }  
  119.       
  120.     this.speed = this.options.Speed;  
  121.     if(iPause > 0){  
  122.         if(Math.abs(this.pause) >= iPause){  
  123.             this.speed = this.options.PauseStep; this.pause = iStep = 0; this.Turn();  
  124.         } else {  
  125.             this.pause += iStep;  
  126.         }  
  127.     }  
  128.       
  129.     return (iScroll + iStep);  
  130.   },  
  131.   //开始  
  132.   Start: function() {      
  133.     //方向设置  
  134.     switch (this.Side[0].toLowerCase()) {  
  135.         case “right” :  
  136.             if(this.widthList < this.widthScroller) return;  
  137.             this.side = -1;  
  138.             this.ScrollLeftRight();  
  139.             break;  
  140.         case “left” :  
  141.             if(this.widthList < this.widthScroller) return;  
  142.             this.side = 1;  
  143.             this.ScrollLeftRight();  
  144.             break;  
  145.         case “down” :  
  146.             if(this.heightList < this.heightScroller) return;  
  147.             this.side = -1;  
  148.             this.ScrollUpDown();  
  149.             break;  
  150.         case “up” :  
  151.         default :  
  152.             if(this.heightList < this.heightScroller) return;  
  153.             this.side = 1;  
  154.             this.ScrollUpDown();  
  155.     }  
  156.   },  
  157.   //停止  
  158.   Stop: function() {  
  159.     clearTimeout(this.timer);  
  160.   }  
  161. };  
  162.  
  163. window.onload = function(){  
  164.     new Scroller(“idScroller”“idScrollMid”,{ Side:[“up”,“left”], PauseHeight:50, PauseWidth:400 });  
  165. }  
  166. </script>  
  167. <style>  
  168. .Scroller {}{line-height:50px; border:1px solid #000000; padding:0px 10px; height:50px; width:400px;}  
  169. .Scroller *{}{margin:0px; padding:0px;}  
  170. .ScrollMid {}{
    float:left;}  
  171. .ScrollMid ul{}{width:800px;float:left;}  
  172. .ScrollMid li{}{list-style:none; float:left; width:390px; padding-left:10px;}  
  173. </style>  
  174. <div id=“idScroller” class=“Scroller” style=“width:400px; height:50px;”>  
  175.   <div style=“width:1600px”>  
  176.     <div id=“idScrollMid” class=“ScrollMid”>  
  177.       <ul>  
  178.         <li>111111111111</li>  
  179.         <li>2222222222222</li>  
  180.         <li>333333333333333</li>  
  181.         <li>4444444444444</li>  
  182.       </ul>  
  183.     </div>  
  184.   </div>  
  185. </div>  
  186. <div id=“test”></div>  
  187. </body>  
  188. </html>  

以上感觉挺不错的,修改成自己想要的滚动内容就ok了~