js不间断滚动的简单实现,js不间断滚动

js不间断滚动的简练完结,js不间断滚动

CSS:

ul, li { 
      margin: 0; 
      padding: 0; 
    } 

    #scrollDiv { 
      width: 300px; 
      height: 25px; 
      line-height: 25px; 
      border-bottom: #4c8cd1 1px solid; 
      overflow: hidden; 
    } 

      #scrollDiv li { 
        height: 25px; 
        padding-left: 10px; 
      } 

JS:

<script> 
   function AutoScroll(obj) { 
     $(obj).find("ul:first").animate({ 
       marginTop: "-25px"
     }, 800, function () { 
       $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); 
     }); 
   } 

   $(document).ready(function () { 
     setInterval('AutoScroll("#scrollDiv")', 3000) 
     setInterval('AutoScroll("#scrollDiv")', 3000) 
   }); 
 </script> 

HTML:

<div id="scrollDiv"> 
        <ul> 
          <li>这是公告标题的第一行</li> 
          <li>这是公告标题的第二行</li> 
          <li>这是公告标题的第三行</li> 
          <li>这是公告标题的第四行</li> 
          <li>这是公告标题的第五行</li> 
          <li>这是公告标题的第六行</li> 
          <li>这是公告标题的第七行</li> 
          <li>这是公告标题的第八行</li> 
        </ul> 

      </div> 

上述那篇js不间断滚动的简便实现就是作者分享给大家的全体内容了,希望能给大家二个参照,也盼望大家多多支持帮客之家。

CSS: ul, li
{ margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px;
line-height: 25px; border-bottom: #4c8cd1 1px…

正文实例陈诉了JS完成单行文字不间断向上滚动的点子。分享给大家供我们参照他事他说加以考察。具体剖判如下:

明天帮八个仇人写了一个单行文字不间断向上滚动的JS效果,未来分享给必要的weber。先看HTML和CSS代码:

CSS:

复制代码 代码如下:

.wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px
auto;}
.roll-wrap{height:130px;overflow:hidden;}

HTML:

复制代码 代码如下:

<div class=”wrap”>
    <div class=”roll-wrap” id=”roll-wrap”>
        <ul>
            <li>JS文本向上滚动1</li>
            <li>JS文本向上滚动2</li>
            <li>JS文本向上滚动3</li>
            <li>JS文本向上滚动4</li>
            <li>JS文本向上滚动5</li>
            <li>JS文本向上滚动6</li>
            <li>JS文本向上滚动7</li>
        </ul>
    </div>
</div>

该动画功效的原理是
先将ul向上滚动一个li的中度,滚动完后将ul里面包车型地铁首先个li放到ul的末梢,那时原第叁个li产生了ul里面的第二个li,然后再重新上边的动作,就那样持续重复实现不间断滚动。

JS(jQuery)代码:

复制代码 代码如下:

function scrollTxt(){
    var controls={},
        values={},
        t1=200, /*播音动画的时刻*/
        t2=2000, /*广播时间间隔*/
        si;
    controls.rollWrap=$(“#roll-wrap”);
    controls.rollWrapUl=controls.rollWrap.children();
    controls.rollWrapLIs=controls.rollWrapUl.children();
    values.liNums=controls.rollWrapLIs.length;
    values.liHeight=controls.rollWrapLIs.eq(0).height();
    values.ulHeight=controls.rollWrap.height();
    this.init=function(){
        autoPlay();
        pausePlay();
    }
    /*滚动*/
    function play(){
        controls.rollWrapUl.animate({“margin-top” :
“-“+values.liHeight}, t1, function(){
            $(this).css(“margin-top” ,
“0”).children().eq(0).appendTo($(this));
        });
    }
    /*自动滚动*/
    function autoPlay(){
        /*若是具备li标签的可观和大于.roll-wrap的可观则滚动*/
        if(values.liHeight*values.liNums > values.ulHeight){
            si=setInterval(function(){
                play();
            },t2);
        }
    }
    /*鼠标经过ul时暂停滚动*/
    function pausePlay(){
        controls.rollWrapUl.on({
            “mouseenter”:function(){
                clearInterval(si);
            },
            “mouseleave”:function(){
                autoPlay();
            }
        });
    }
}
new scrollTxt().init();

盼望本文所述对我们的javascript程序设计有着帮忙。

你恐怕感兴趣的稿子:

  • js完成的文字横向无间断滚动
  • 浅析js 文字滚动作效果应
  • js 上下文字滚动作效果应
  • js文字滚动停顿效果代码
  • js达成文字滚动作效果应
  • javascript
    单行文字向上跑马灯滚动展现
  • js 动态文字滚动的例子
  • javascript跟随鼠标的文字带滚动作效果应
  • javascript
    模拟Marquee文字向左均匀滚动代码
  • js+div实现文字滚动和图纸切换效果代码
  • JS达成文字向下滚动完整实例
  • JavaScript完毕的原生态包容IE6可调可控滚动文字成效详解

相关文章