javascript实现无缝滚动

参考: http://www.dajiti.com/my/p/112941,记下之以备方便后用
无缝滚动用在图片,文字 上都可以!
实现思路：一个设定宽度/高度(左右滚动时设置宽度,上下滚动时设置高度)并且隐藏超出它宽度/高度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接copy，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
以下向上滚动的代码:

  < style type = " text/css " >
     <!--
    #demo  {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 100px;
    text-align: center;
    float: left;
    }
    #demo img  {
    border: 3px solid #F2F2F2;
    display: block;
    }
     -->
     </ style >
    向上滚动
     < div id = " demo " >
     < div id = " demo1 " >
     < a href = " # " >< img src = " 1.gif "  border = " 0 "   /></ a >
     < a href = " # " >< img src = " 2.gif "  border = " 0 "   /></ a >
     < a href = " # " >< img src = " 3.gif "  border = " 0 "   /></ a >
     < a href = " # " >< img src = " 4.gif "  border = " 0 "   /></ a >
     < a href = " # " >< img src = " 4.gif "  border = " 0 "   /></ a >
     < a href = " # " >< img src = " 5.gif "  border = " 0 "   /></ a >
     </ div >
     < div id = " demo2 " ></ div >
     </ div >
     < script >
     <!--
    var speed = 10 ;  // 数字越大速度越慢
    var tab = document.getElementById( " demo " );
    var tab1 = document.getElementById( " demo1 " );
    var tab2 = document.getElementById( " demo2 " );
    tab2.innerHTML = tab1.innerHTML;           // 克隆demo1为demo2
// 向上滚动的代码
    function Marquee() {

    if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
    tab.scrollTop-=tab1.offsetHeight  //demo跳到最顶端
    else{
    tab.scrollTop++
    }
    }

    var MyMar = setInterval(Marquee,speed);
    tab.onmouseover = function()  {clearInterval(MyMar)} ; // 鼠标移上时清除定时器达到滚动停止的目的
    tab.onmouseout = function()  {MyMar=setInterval(Marquee,speed)} ; // 鼠标移开时重设定时器
     -->
     </ script >

郊果: 向上滚动

同样:

//向下 
   function Marquee(){
     if (tab1.offsetTop - tab.scrollTop >= 0 ) // 当滚动至demo1与demo2交界时
    tab.scrollTop += tab2.offsetHeight   // demo跳到最顶端
     else {
    tab.scrollTop --
    }
    }
// 向左右时要设置demo的宽度
// 向左
    function Marquee(){
     if (tab2.offsetWidth - tab.scrollLeft <= 0 )
    tab.scrollLeft -= tab1.offsetWidth
     else {
    tab.scrollLeft ++ ;
    }
    }
// 向右
    function Marquee(){
     if (tab.scrollLeft <= 0 )
    tab.scrollLeft += tab2.offsetWidth
     else {
    tab.scrollLeft --
    }
    }

 

相关属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度