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 ...
随机推荐
- POJ 1061 青蛙的约会【扩欧】
题意: 两只青蛙在地球同一纬度不同位置x,y向同一方向跳,每只青蛙跳的长度不同m,n,纬线总长度l,问两只青蛙是否能相遇,跳几次才相遇. 分析: 可知,问题可转化为求(m−n)∗a≡(y−x)(mod ...
- cogs——2416. [HZOI 2016]公路修建
2416. [HZOI 2016]公路修建 ★☆ 输入文件:hzoi_road.in 输出文件:hzoi_road.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述 ...
- substring详细用法,截取不行就用替换
SUBSTRING 返回字符.binary.text 或 image 表达式的一部分.有关可与该函数一起使用的有效 Microsoft® SQL ...
- 百度语音识别API初探
近期想做个东西把大段对话转成文字.用语音输入法太慢,所以想到看有没有现成的API,网上一搜,基本就是百度和讯飞. 这里先看百度的 笔者使用的是Java版本号的 下载地址:http://bos.nj.b ...
- Spring中JavaConfig特性
从Spring3開始,增加了JavaConfig特性.JavaConfig特性同意开发人员不必在Spring的xml配置文件里定义bean,能够在Java Class中通过凝视配置bean,假设你讨厌 ...
- 百度编辑器ueditor给上传的图片加入水印
百度编辑器本身是没有为上传图片加入水印的功能,想要在上传的时候加入图片水印,也非常easy.以 ueditor 1.2.6 为例.打开php文件夹以下的imageUp.php文件,查找"$i ...
- myEclipse怎样将程序部署到tomcat(附录MyEclipse调试快捷键)
部署 1.选中你要部署的项目,在工具栏找到 Deploy MyEclipse J2EE Project to Server 2.单击Add,即出现例如以下界面.选择对应的Server,要和你在配置to ...
- 华为OJ2011-最长公共子串
一.题目描述 描述: 计算两个字符串的最大公共子串(Longest Common Substring)的长度,字符区分大小写. 输入: 输入两个字符串 输出: 输出一个整数 样例输入: asdfas ...
- docker (1) ---简介,使用
一.docker简介: 容器( container-based )虚拟化方案,充分利用了操作系统本身已有的机 制和特性,以实现轻量级的虚拟化(每个虚拟机安装的不是完整的虚拟机), 甚至有人把他称为新一 ...
- js jquery验证上传文件的格式和大小
// 验证附件格式和大小 function confirmData() { var flag = true; var message = ""; var errorSize = & ...