释放双眼，带上耳机，听听看~！
本文章是一个用jquery做的类似弹幕特效，新手前端朋友可以玩下，原理不难，和文字滚动特效稍微有点区别，目前css样式可能会觉不好看，速度不合适都可以自由控制的，改为你想要的效果就可以用到你的网站上了
特效效果图如下：
jquery弹幕特效
好看哦！
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]);
})
内容投诉
