使用用jquery做的弹幕特效

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

特效效果图如下:

使用用jquery做的弹幕特效
	
		
	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]);
	})
	
	


隐藏内容,您需要满足以下条件方可查看
End
内容投诉

人已赞赏
前端开发

移动端页面适配的方案

2018-11-4 9:57:29

前端开发

WEB前端jQuery漂浮广告代码

2018-11-5 14:29:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索