jquery文字循环滚动播报实现

题引

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

工具：jquery

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

思路

<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在线部署…………

jquery文字循环滚动播报实现相关推荐

html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
小程序文字循环滚动动画（完美解决）
解决问题: 1.文字循环播放特效 2.小程序退出.隐藏后台动画停止(已解决) 效果: 代码: wxml <view animation="{{animation}}" cla ...
html滚动字幕循环,H5 div文字循环滚动
实际上也叫跑马灯.说起跑马灯这个词,还是去年或前年写iOS时候用到的呢,不知道是哪位前辈兴得这个词儿.在h5里俗点儿说就是,使用一个div做容器,让里面的文字水平轮番播放. 之前在oc内都是使用第三方 ...
jquery 文字无缝滚动
这里作为一个文字无缝滚动,简单js写法记录 html:  <div id="box-move&q ...
jquery 无限循环滚动，文字图片皆可，IE6,7,8,FF8测试无误
有人说原生js写的有兼容问题,我在网上查了查,此类型的代码有很多(高手还是很多的),但是写的太复杂,最近正好在看<锋利的jquery>,书中有这样的例子,书中的例子是新闻标题向上无缝滚动, ...
vueloopscroll 公告文字循环滚动中奖记录循环滚动插件
源码地址:https://gitee.com/sywlgzs/vueloopscroll 使用 npm安装 npm i vueloopscroll 使用方法: 1.在 main.js中引入impor ...
jQuery无限循环滚动出现的问题
1.问题描述:鼠标离开后,滚动速度减慢. 原因:一个周期滚动1600px,时间周期为10s,鼠标离开后,继续完成该周期内剩余滚动距离,此时仍然花费10s,滚动速度必然减慢. 解决办法:按照比例,算出剩 ...
jQuery左右循环滚动图片特效
在线演示本地下载转载于:https://www.cnblogs.com/lovellll/p/10098430.html

jquery文字循环滚动播报实现

题引

思路

github在线部署

总结

jquery文字循环滚动播报实现相关推荐

最新文章

热门文章