HTML代码:

<div id="aaa" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;">
<div id="noticeList" style="position:absolute; top:0; height:20px;">
<span>jQuery文字横向滚动</span>
</div>
</div>

Jquery代码:

$.fn.textScroll=function(){
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); }

  页面调用:

$(function(){
$("#aaa").textScroll();//aaa为最外层div的Id 也可写Class 如:$(".aaa") 此处aaa为class名
});

  

jQuery实现文字横向滚动效果的更多相关文章

  1. Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  2. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  3. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  4. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  5. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  6. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  7. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  8. jquery文字纵向滚动效果(带间隔停留)

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  9. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

随机推荐

  1. 更新数据库中数据时出现: Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences 问题

    使用workbench在数据库中更新数据时报错: You are using safe update mode and you tried to update a table without a WH ...

  2. Jmeter执行java脚本结束时提示:The JVM should have exited but did not.

    使用jmeter对dubbo进行压测时,需要使用jmeter的sampler里的java请求 使用./jmeter.sh -n -t test.jmx -l test.jmx -o -e test后台 ...

  3. dubbo服务的group和version

    group 当一个接口有多种实现时,可以用group区分 <!-- dubbo group 使用示例 --> <bean id="demoA" class=&qu ...

  4. 计算机常识--win7 删除文件、拒绝訪问等等,所有提示权限不够 解决的方法

    本来都不想写这些东西的,可是又常常遇到,还是记录一下吧! 一键获取管理员的最高权限 创建一个txt文件,然后将其后缀改为.reg格式:内容例如以下 Windows Registry Editor Ve ...

  5. C#——await与async实现多线程异步编程

    曾经,我们也许用过Thread.在主线程运行的时候.新开还有一个新线程,来运行新方法. 今天看别人发给我的一段代码的时候发现了一个不认识的await,可是又感觉非常熟悉的样子,感觉是线程那块儿的东西, ...

  6. AutoCAD如何打印

    现在有一个CAD图纸,左侧为房型图,右侧为规划好之后的图纸,我只要打印右侧的东西.点击文件-打印   在打印设备中选择Default Windows System Printer,名称的下拉菜单下面有 ...

  7. Windows网络编程:winsock文件传输范例

    基于TCP流协议的winsock网络文件传输Demo: 实现:C语言 功能:文件传输(可以传任何格式的文件) /******************************************** ...

  8. Swift—使用try?和try!区别-仅供参考

    在使用try进行错误处理的时候,经常会看到try后面跟有问号(?)或感叹号(!),他们有什么区别呢? 1.使用try?  try?会将错误转换为可选值,当调用try?+函数或方法语句时候,如果函数或方 ...

  9. Linux bash: scp: command not found的问题记录

    ,总结 scp成功,须要两个server都安装了scp服务才行.

  10. Android 代码设置Activity 背景透明

    当指定Activity 样式 Them.Dialog 时候 又不同意用XML 设置 Activity 的背景颜色的时候 用代码 this.getWindow().getDecorView().setB ...