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 ...
随机推荐
- 2017-10-02-afternoon
T1 最大值(max) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度 ...
- HDU——2647 Reward
Reward Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- Windows7下ftp服务器
1. 创建用户 2. 创建ftp服务 3. 管理ftp站点 4. 权限编辑 5. 绑定iP和端口 6. 访问 7. Java代码上传文件 import java.io.File; import jav ...
- rsyslog trouble shooting
openstack,swift的log不输出了.trouble shooting过程 , 发现我们的程序 /var/log/swift/proxy.log等总是不输出log. 因为log rsyslo ...
- mysql 时间戳格式化函数from_unixtime使用说明
我们一般使用字段类型int(11)时间戳来保存时间,这样方便查询时提高效率.但这样有个缺点,显示的时间戳,非常难知道真实日期时间. mysql提供了一个时间戳格式化函数from_unixtime来转换 ...
- CentOS 7加强安全性:
CentOS 7加强安全性:1. 更改 root 密码************************************************************************* ...
- bootstrap 时间控件
近期使用了bootstrap的UI感觉确实非常美丽,非常值得学习和使用. 以下先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是很的简单.仅仅须要引入主要的css和js就能够了 须要 ...
- 完整显示当前日期和时间的JS代码
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...
- 使用 BenchmarkDotnet 测试代码性能 【Win10】单元测试中捕获异步方法的指定异常
先来点题外话,清明节前把工作辞了(去 tm 的垃圾团队,各种拉帮结派.勾心斗角).这次找工作就得慢慢找了,不能急了,希望能找到个好团队,好岗位吧.顺便这段时间也算是比较闲,也能学习一下和填掉手上的坑. ...
- C++ - 使用copy函数打印容器(container)元素
使用copy函数打印容器(container)元素 本文地址: http://blog.csdn.net/caroline_wendy C++能够使用copy函数输出容器(container)中的元素 ...