2014-05-22js实现文字、图片向上向左无缝滚动

    您现在的位置是:首页 > 学无止境 > 网站建设

    文字或图片实现 向上 无缝滚动

    <div id="colee" style="overflow:hidden;height:80px;">

        <div id="colee1">

               <li><a href="/">文字或图片实现向上无缝滚动</a></li>

               <li><a href="/">文字或图片实现向上无缝滚动</a></li>

               <li><a href="/">文字或图片实现向上无缝滚动</a></li>

               <li><a href="/">文字或图片实现向上无缝滚动</a></li>

               <li><a href="/">文字或图片实现向上无缝滚动</a></li>

               <li><a href="/">文字或图片实现向上无缝滚动</a></li>

        </div><div id="colee2"></div>     

    </div>

    <script>

    var speedi=80;

    var colee2=document.getElementById("colee2");

    var colee1=document.getElementById("colee1");

    var colee=document.getElementById("colee");

    colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2

    function Marquee1(){

    //当滚动至colee1与colee2交界时

    if(colee2.offsetTop-colee.scrollTop<=0){

    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端

    }else{

    colee.scrollTop++

    }

    }

    var MyMar1=setInterval(Marquee1,speedi)//设置定时器

    //鼠标移上时清除定时器达到滚动停止的目的

    colee.onmouseover=function() {clearInterval(MyMar1)}

    //鼠标移开时重设定时器

    colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speedi)}

    </script>

    文字或图片实现 向左 无缝滚动

    <!--下面是向左滚动代码-->

          <div id="colee_left" style="overflow:hidden;width:200px;">

            <table cellpadding="0" cellspacing="0" border="0">

              <tr>

                <td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0">

                    <tr align="center">

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                      <td><a href="/">文字或图片实现向左无缝滚动</a></td>

                    </tr>

                  </table></td>

                <td id="colee_left2" valign="top"></td>

              </tr>

            </table>

          </div>

          <script>

    //使用div时,请保证colee_left2与colee_left1是在同一行上.

    var speed=30//速度数值越大速度越慢

    var colee_left2=document.getElementById("colee_left2");

    var colee_left1=document.getElementById("colee_left1");

    var colee_left=document.getElementById("colee_left");

    colee_left2.innerHTML=colee_left1.innerHTML

    function Marquee3(){

    if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度

    colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度

    else{

    colee_left.scrollLeft++

    }

    }

    var MyMar3=setInterval(Marquee3,speed)

    colee_left.onmouseover=function() {clearInterval(MyMar3)}

    colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

    </script> 

    <!--向左滚动代码结束-->

关键字词:js,无缝滚动