题引
需要实现一个从右往左,文字循环滚动播报的功能
工具:jquery
思路
<div id="barrageInfo">
<div>
<span>文字</span>
</div>
</div>
- 步骤一:文字获取,当然,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在线部署…………