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 ...
随机推荐
- Ubuntu 16.04安装SwitchHosts
下载: https://github.com/oldj/SwitchHosts/releases 解压: unzip SwitchHosts-linux-x64_v3.3.6.5287.zip 移动: ...
- muduo定时器、多线程模型及epoll的封装
timerfd是Linux为用户程序提供的一个定时器接口,这个接口基于文件描述符. clock_gettime函数可以获取系统时钟,精确到纳秒.需要在编译时指定库:-lrt.可以获取两种类型时间: C ...
- Trie树(Prefix Tree)介绍
本文用尽量简洁的语言介绍一种树形数据结构 -- Trie树. 一.什么是Trie树 Trie树,又叫字典树.前缀树(Prefix Tree).单词查找树 或 键树,是一种多叉树结构.如下图: 上图是一 ...
- DBCP,C3P0,Tomcat_JDBC 性能及稳定性測试
原创文章,转载请指明出处:http://aub.iteye.com/blog/1404219, 尊重他人即尊重自己 DBCP,C3P0,Tomcat_JDBC 性能及稳定性測试 1.測试环境: 硬件环 ...
- 淘宝数据库OceanBase SQL编译器部分 源代码阅读--生成物理查询计划
SQL编译解析三部曲分为:构建语法树,制定逻辑计划,生成物理运行计划. 前两个步骤请參见我的博客<<淘宝数据库OceanBase SQL编译器部分 源代码阅读--解析SQL语法树>& ...
- Codeforces Round #311 (Div. 2) D - Vitaly and Cycle
D. Vitaly and Cycle time limit per test 1 second memory limit per test 256 megabytes input standard ...
- oracle type类型
转载 http://blog.sina.com.cn/s/blog_6cfb6b090100ve92.html 转自网络,具体用法我会再细化 1.概念 方法:是在对象类型说明中用关键字 MEM ...
- zoj 3822(概率dp)
ZOJ Problem Set - 3822 Domination Time Limit: 8 Seconds Memory Limit: 131072 KB Special Ju ...
- MySQL 基础 —— 数据类型、各种变量
1. 基本数据类型 char:prod_id char(10),括号内的内容表示字符的长度 decimal:十进制,不带参数为整数(四舍五入) text:文本类型,长度不限 2. 日期和时间处理函数 ...
- obs nginx-rtmp-module搭建流媒体服务器实现直播 ding
接下来我就简单跟大家介绍一下利用nginx来搭建流媒体服务器. 我选择的是腾讯云服务器 1.下载nginx-rtmp-module: nginx-rtmp-module的官方github地址:http ...