邪贴的金库吧 关注:167贴子:1,766
  • 3回复贴,共1

JS各种滚动

只看楼主收藏回复



1楼2012-01-05 20:32回复
    -------------------------向上滚动------------------------------
    <div id="colee" style="overflow:hidden;height:253px;width:410px;">
    <div id="colee1">
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
    <p><img src=""></p>
    </div>
    <div id="colee2"></div>
    </div>
    <script>
    var speed=30;
    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,speed)//设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    colee.onmouseover=function() {clearInterval(MyMar1)}
    //鼠标移开时重设定时器
    colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
    </script>


    2楼2012-01-05 20:34
    回复

      ------------------------向下滚动-----------------------------
      <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
      <div id="colee_bottom1">
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      <p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
      </div>
      <div id="colee_bottom2"></div>
      </div>
      <script>
      var speed=30
      var colee_bottom2=document.getElementById("colee_bottom2");
      var colee_bottom1=document.getElementById("colee_bottom1");
      var colee_bottom=document.getElementById("colee_bottom");
      colee_bottom2.innerHTML=colee_bottom1.innerHTML
      colee_bottom.scrollTop=colee_bottom.scrollHeight
      function Marquee2(){
      if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
      colee_bottom.scrollTop+=colee_bottom2.offsetHeight
      else{
      colee_bottom.scrollTop--
      }
      }
      var MyMar2=setInterval(Marquee2,speed)
      colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
      colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
      </script>
      


      3楼2012-01-05 20:35
      回复
        ------------------------向左滚动-----------------------------
        <div id="colee" style="overflow:hidden; white-space:nowrap;width:280px; margin-top:15px;">
        <div id="colee1" style="display:inline;">
        合作热线:82721111 &nbsp;联系人: 程先生&nbsp; 13971039086 &nbsp;黄先生 &nbsp;13986198328 &nbsp;
        </div>
        <div id="colee2" style="display:inline;"></div>
        </div>
        <script>
        var speed=30;
        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(colee.scrollLeft>colee1.offsetWidth){
        colee.scrollLeft=0; //colee跳到最顶端
        }else{
        colee.scrollLeft++
        }
        }
        var MyMar1=setInterval(Marquee1,speed)//设置定时器
        //鼠标移上时清除定时器达到滚动停止的目的
        colee.onmouseover=function() {clearInterval(MyMar1)}
        //鼠标移开时重设定时器
        colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
        </script>


        6楼2012-01-05 22:15
        回复