jQuery实现文字横向滚动效果
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实现文字横向滚动效果的更多相关文章
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
		
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
 - jquery实现文字上下滚动效果
		
文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...
 - jquery实现多行文字图片滚动效果
		
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
 - js实现文字上下滚动效果
		
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
 - 【转】使用jquery animate创建平滑滚动效果
		
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
 - js实现文字横向滚动
		
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
 - 利用jquery实现向左滚动效果及offset的使用
		
昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:
 - jquery文字纵向滚动效果(带间隔停留)
		
<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...
 - js 实现文字列表滚动效果
		
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
 
随机推荐
- 高数(A)下 第十二章
			
12.1 12.2 12.3 12.4 12.5 12.6 自测题
 - Tomcat服务器调优
			
一,目标:优化tomcat来提高访问的并发能力. 服务器提供的内存,cpu,以及硬盘的性能对数据的处理起决定性作用. tomcat的3种运行模式 tomcat的运行模式有3种: 1. bio默认的模式 ...
 - java IO流之三 使用缓冲流来读写文件
			
原文:http://blog.csdn.net/haluoluo211/article/details/52183219 一.通过BufferedReader和BufferedWriter来读写文件 ...
 - JAVA程序—HelloWorld 的编译运行
			
在我们写好我们的"HelloWorld.java",并且搭建好JAVA的开发环境过后,便可以运行这个JAVA程序了. 具体如何实现,让我们来看看: 打开DOS 通过DOS命令转到& ...
 - [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
			
Aspect Oriented Programming, AOP, allows to reuse logic across an entire app in a very neat way, dec ...
 - mysql 经常使用命令整理总结
			
#改动字段类型 alter table `table_name` modify column ip varchar(50); #添加字段 alter table `table_name` add ip ...
 - C++虚函数表剖析
			
关键词:虚函数.虚表,虚表指针,动态绑定,多态 一.概述 为了实现C++的多态,C++使用了一种动态绑定的技术. 这个技术的核心是虚函数表(下文简称虚表).本文介绍虚函数表是怎样实现动态绑定的. 二. ...
 - mysql 將時間戳直接轉換成日期時間
			
from_unixtime()是MySQL裏的時間函數 Sql代碼 select uid,userid,username,email,FROM_UNIXTIME(addtime,'%Y年%m月%d') ...
 - 使用heartbeat+monit实现主备双热备份系统
			
一.使用背景 项目须要实现主备双热自己主动切换的功能,保证系统7*24小时不间断执行.现已有两台双网卡的IBM的server,为了不再添加成本採购独立外部存储设备和双机热备软件.採用了linux下开源 ...
 - Iteye已经沦陷
			
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHl5YXJpZXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...