jquery文字循环滚动播报实现

题引

需要实现一个从右往左，文字循环滚动播报的功能

工具：jquery

演示地址1（这个慢）
演示地址2（点这个）

思路

	

		文字
	
		

• 步骤一：文字获取，当然，demo里面直接造
  对包含文字的div相对于父容器进行绝对定位，通过改变right值来进行移动

#barrageInfo>div {
	position: absolute;
	right: -1000px;
}

• 步骤二：文字移动速度以及文字宽度，speed单位是毫秒，这个可以自己调节

speed = 1000*document.body.clientWidth/80
infoWidth = $("#barrageInfo span").width()

• 步骤三 一次文字移动

//文字移动
function barrageAnimate(){
	$("#barrageInfo>div").css("right",'-'+infoWidth+'px');  //设置文字的起始位置
	$("#barrageInfo>div").animate({
		right:'1100px',
	},speed,'linear')
}

• 步骤四 定时执行文字滚动，两次滚动过程之间间隔两秒

setInterval(barrageAnimate,speed+2000);

github在线部署

• 方法一：使用 http://htmlpreview.github.io
  只需要把你的访问的页面的的链接放在http://htmlpreview.github.io/?后面就行
  
  拼接结果：
  运行为演示地址1
• 方法二：使用个gethub上Github pages的功能，推荐这个，快
  具体请参考这位大佬的博客：https://www.cnblogs.com/lijiayi/p/githubpages.html
  运行为演示地址2

总结

其实收获是研究了一番github在线部署…………