文字上下滚动

Posted 2020-10-13 adongP

//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();

}