html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能。
HTML代码如下:
JS代码:
方法一:
$.fn.textScroll=function(){
var speed=60,flag=null,tt,that=$(this),child=that.children();
var p_w=that.width(), w=child.width();
child.css({left:p_w});
var t=(w+p_w)/speed * 1000;
function play(m){
var tm= m==undefined ? t : m;
child.animate({left:-w},tm,"linear",function(){
$(this).css("left",p_w);
play();
});
}
child.on({
mouseenter:function(){
var l=$(this).position().left;
$(this).stop();
tt=(-(-w-l)/speed)*1000;
},
mouseleave:function(){
play(tt);
tt=undefined;
}
});
play();
}
方法二:
$.fn.textScroll=functioon(){
var p = $(this),
c = p.children(),
speed=3000;// 值越大,速度越小
var cw = c.width(),pw=p.width();
var t = (cw / 100) * speed;
var f = null, t1 = 0;
function ani(tm) {
counttime();
c.animate({ left: -cw }, tm, "linear", function () {
c.css({ left: pw });
clearInterval(f);
t1 = 0;
t=((cw+pw)/100)*speed;
ani(t);
});
}
function counttime() {
f = setInterval(function () {
t1 += 10;
}, 10);
}
p.on({
mouseenter: function () {
c.stop(false, false);
clearInterval(f);
console.log(t1);
},
mouseleave: function () {
ani(t - t1);
console.log(t1);
}
});
ani(t);
}
最后调用$("#s").textScroll();
以上这篇jQuery文字横向滚动效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码相关推荐
- HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
- php字体闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
- html怎么制作公告滚动字幕,实现公告文字轮播效果
公告 暂无公告 {{text.val}} import baseModule from '../baseModule' export default { name: "announcemen ...
- html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
- html时间轴横向自动播放,利用jQuery实现日期时间轴自动播放代码
特效描述:利用jQuery实现 日期时间轴 自动播放代码.利用jQuery实现日期时间轴自动播放代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 渲染未完成延迟动画 渲染完成继续动 ...
- php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
- python 滚动字幕软件_文字跑马灯(滚动字幕)效果并指定速度
敬告:该系列的课程在抓紧录制更新中,敬请大家关注. 敬告: 该系列的课程涉及:FFmpeg,WebRTC,SRS,Nginx,Darwin,Live555,等.包括:音视频.流媒体.直播.Androi ...
- jquery文字循环滚动播报实现
题引 需要实现一个从右往左,文字循环滚动播报的功能 工具:jquery 演示地址1(这个慢) 演示地址2(点这个) 思路 <div id="barrageInfo">& ...
- jquery 文字无缝滚动
这里作为一个文字无缝滚动,简单js写法记录 html: <!-- box-move 滚动的盒子ul1 滚动列表ul2 衔接列表--> <div id="box-move&q ...
最新文章
- 高仿书旗小说 Flutter版,支持iOS、Android
- 【php】windows安装PHP5.5+Apache2.4
- 时间序列:五种编辑距离和Python实现
- 【maven】dependency的systemPath属性:引入本地系统中的jar
- 如果 “ 2X ”的补码是“ 90H ”,那么 X 的真值是( )。
- 第二十二章 6未命名的命名空间
- 从啥也不会的小白,如何成为合格的算法工程师?
- POJ1769(线段树+DP)
- 阿拉伯文字库 阿拉伯语字库 阿拉伯 字库 变形组合算法
- 炫酷而不复杂,RDP报表就是这么实用方便
- 农历 阴历 转换阳历算法
- 神武4最新服务器,《神武4》亲自体验现版本新区后的新区告白
- 有人晒出程序员聚餐照片,网友:根据头发量能看出技术水平高低!
- BZOJ_1778_[Usaco2010_Hol]_Dotp_驱逐猪猡_(期望动态规划+高斯消元+矩阵)
- vue3-HTTP请求
- Android8.0 蓝牙系统
- 从显示一张图片开始学习OpenGL ES
- 新版CSDN怎么改博客背景
- Conflux伍鸣:用DAG结构提升中本聪共识的吞吐率
- PCB设计中如何区分 滤波电容、去耦电容、旁路电容