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. [bzoj2251][2010BeiJing Wc]外星联络_后缀数组

    外星联络 bzoj-2251 2010-BeiJing Wc 题目大意:题目链接. 注释:略. 想法: 这咋做啊????一看数据范围才$3\cdot 10^3$. 建立后缀数组. 所以我们将所有后缀排 ...

  2. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

  3. python比较大小

    1.python的比较总是检查复合对象的所有部分,直到可以得出结果为止. 2.会自动遍历嵌套的所有数据结构,有多深走多深,首次发现的差值将决定比较的结果 3.== :操作符测试值的相等性 4.is : ...

  4. linux命令dmesg查看进程被杀死原因

    有一次一个python进程挂了,使用了下这个命令. 可以看到原因:虚拟机总共内存8082608KB,结果python项目就消耗掉了7341764KB,内存泄露,导致python进程被系统杀死 顺带介绍 ...

  5. modem&NIC&sound card

    Rate: Phone:8 k hz   radio:22050 hz Digital Video camcorder; miniDV; DAT LP mode:32 k hz Audio CD MP ...

  6. 杭电 3555 Bomb

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  7. HDU 2054 A == B ?(找小数点)

    题目链接:pid=2054" target="_blank">http://acm.hdu.edu.cn/showproblem.php?pid=2054 Prob ...

  8. [Python] How to unpack and pack collection in Python?

    It  is a pity that i can not add the video here. As a result, i offer the link as below: How to unpa ...

  9. uva 12265 贩卖土地

    题目大意: 有一个矩阵 有些点可以取有些不能 求以每个点为右下角的子矩阵(里面点都可以取)的周长最大值 最后统计出每个周长对应矩阵的个数 思路: 单调栈 先预处理出每个点向上最多能延伸多长记为h(i, ...

  10. Codeforces 802 补题

    codeforces802 A-O Helvetic Coding Contest 2017 online mirror A  Heidi and Library (easy) 水题 同B #incl ...