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 ...
随机推荐
- CODEVS——T 3736 【HR】万花丛中2
http://codevs.cn/problem/3736/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description ...
- 【转】关于easyui tab 加载 js ajax 不走后台的问题, 怕找不到 以防万一
一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天在此说明一下原因. 不管是window,dailog还是tab其实质最终都是继承了panel.panel有两种方式展示 ...
- C++ Primer高速入门之五:有用的模板库
更新:又一次排版代码格式 除上篇博客介绍的基本数据类型外,C++ 还定义了一个内容丰富的抽象数据类 型标准库. 包含 string 和 vector,它们分别定义了字符串和矢量(集合).string ...
- SQL的事务回滚操作带案例分析
SET XACT_ABORT on BEGIN TRAN INSERT INTO [PDA_Action] VALUES ('採购入库1') INSERT INTO [PDA_Action] V ...
- 在JAR中打包使用JAR库
不知大家在写Java程序的时候有没有这种需求: 将引用其他第三方JAR库的项目打包成一个JAR文件执行.也就是说在你打包好的JAR文件里再包括那些你引用的第三方JAR文件,合成一个JAR包,这样仅仅需 ...
- Eclipse Android环境配置
1.离线安装ADT插件,先将ZIP包下载 Help- Install New Software- Add 重启 2.WIndows -Preference设置SDK目录
- Zend Studio如何调试?
1.安装Zend Studio之前,本机已安装Apache2.如果使用Apache2作为服务器 Window-Preferences-Php-Php Servers 配置好 URL和Server Ro ...
- HTTP要点概述:十一,HTTP状态码
一,状态码: 状态码告知从服务器返回的请求结果.用户借助状态码可以判断服务器是正常处理了请求,还是发生了错误. 状态码比如200 OK,以3位数字和原因短语组成. 数字中的第一位制定了相应的类别,后两 ...
- SpringMVC 运行过程
加入jar包 在web.xml中配置DispatherServlet 加入SpringMVC配置文件 编写处理请求的处理器,并表示为处理器 编写视图 可见的运行流程: 实际的运行流程:
- 8-23 canvas专题
8-23 canvas专题-了解外部框架的使用 学习要点 掌握画布内容的导出的toDataURL()方法 了解外部框架的使用 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canv ...