用jquery做的弹幕特效

Joker • • 前端笔记 • 288 阅读

     本文章是一个用jquery做的类似弹幕特效，新手前端朋友可以玩下，原理不难，和文字滚动特效稍微有点区别，目前css样式可能会觉不好看，速度不合适都可以自由控制的，改为你想要的效果就可以用到你的网站上了。

jquery手机弹幕特效

特效效果图如下：

jquery手机弹幕特效

点击查看特效





jquery弹幕特效




html {
font-size: 80px;
}
* {
margin: 0;
padding: 0;
}
.wrap {
max-width: 640px;
min-width: 320px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.scrollBox {
height: 10rem;
overflow: hidden;
position: relative;
}
.scrollBox ul {
position: absolute;
left: 0;
top: 0;
height: 100%;
text-align: center;
width: 18.8rem;
}
.scrollBox ul li {
display: inline-block;
margin: 0.16rem 0.2rem;
background-color: #eeeeee;
border-radius: 80px;
font-size: 0.2rem;
padding: 0.1rem 0.3rem;
}







    

  • 好看哦！
    • 

  • 6666
    • 

  • 大家好，，啦啦啦
    • 

  • 哈哈哈哈哈哈哈
    • 

  • 进度条慢一点哦！
    • 

  • 这么晚了还有这么多人啊
    • 

  • 不敢快进，哈哈。
    • 

  • 哦也哟哟哟
    • 

  • 打他打他，打死他
    • 

  • 这个人真的很讨厌，赶紧去死
    •
window.addEventListener('DOMContentLoaded',function(){ var arr =[]; var oUl = $('.scrollBox ul') var aLi = $('.scrollBox ul li'); var timeArr = []; var winW = $('.wrap').width(); var weizhi = 0; var speed = 0.05; //数字越大，速度越快 aLi.each(function(){ arr.push( [ ($(this).offset().left - oUl.offset().left) ,  ($(this).offset().top - oUl.offset().top),$(this).outerWidth(true) ] ) timeArr.push(($(this).offset().left - oUl.offset().left +$(this).outerWidth(true))/speed) }) console.log(timeArr) aLi.each(function(){ var index = $(this).index(); aLi.eq(index).css({'position':'absolute','left':arr[index][0],'top':arr[index][1]}) }) function chongfu(){ aLi.each(function(){ var index = $(this).index(); aLi.eq(index).animate({left:-arr[index][2]},timeArr[index],function(){ aLi.eq(index).css('left',arr[index][0] + winW) }) }) } chongfu(); setInterval(function () { chongfu(); },timeArr[9]); })