文字上下滚动

Posted adongP

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文字上下滚动相关的知识,希望对你有一定的参考价值。

//css

.slidsWarpper{
  height:100px;
  width:80%;
  margin:0 auto;
  border:2px solid red;
  overflow: hidden;
  position:relative;
}
.slides{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.slide{
  height:30px;
  border:1px solid goldenrod;
  width:100%
}
</style>


 

//html

<div class="slidsWarpper">
  <div class="slides">

    <div class="slide">
      <a target="_blank" href="#">
        <p>111111111 </p>
      </a>

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>2222222222222222</p>
      </a>

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>2015第十五届中国国际冶金工业展览会在沪召开</p>
      </a>

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>上海大数据分析企业亮相第二届世界互联网大会 </p>
      </a>

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>大数据创造价值,汇赋科技邀您共聚第三届世界互联网大会 </p>

      </a>
    </div>

  </div>

</div>


//js

window.onload = function(){

  var targetTop = 30;

  var targetTimer = 2000;

  function scroll(){

    var currentTop = Math.abs($(‘.slide‘).posiiton().top);

    var duration = (targetTop - currentTop) * targetTimer / targetTop;

    var slide = $(‘.slides‘).find(‘.slide:first‘);

    $(‘.slides‘).animate({‘top‘:-targetTop},duration,‘linear‘,function(){

      $(‘.slides‘).append(slide).css(‘top‘,0);

      scroll();

    })

  }

  scroll();

}

 

 

 

 

以上是关于文字上下滚动的主要内容,如果未能解决你的问题,请参考以下文章

html中上下滚动的文字代码,举例?

用html怎么做上下滚动的文字或者图片(就跟那种小广告一样~)

vue实现文字上下滚动

文字上下滚动

html中上下滚动的文字代码,举例?

html滚动字幕怎么做