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 ...
随机推荐
- [bzoj5314][Jsoi2018]潜入行动_树形背包dp
潜入行动 bzoj-5314 Jsoi-2018 题目大意:题目链接. 注释:略. 想法: 学长给我们除了一套考试题,三个学长一人一道这是T1. 好吧好吧,傻逼背包...... 复杂度$O(nk)$. ...
- Python安装与基本数据类型
人生苦短,我选Python. Python比其他的语言来说真的简洁多了,很多时候想做的东西都有对应的模块可以导入,平时玩点小东西真心不错. 首先讲一下安装,其实没什么好讲的,点点点点点,完事. 这里的 ...
- JDBC的数据类型
以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/data-types.html: JDBC驱动程序在将Java数据类型发送到数据库之前,会将其转换为相应 ...
- reader dc
https://get.adobe.com/cn/reader/otherversions/
- MongoDB小结24 - 索引简介2
索引的名字 集合中每个索引都有一个字符串类型的名字,来唯一标识索引. 服务器通过名字来操作或者删除索引. 要注意的是,索引名有字符个数限制,所以索引创建时一定要用自定义的名字,如 db.user.en ...
- CSS聊天气泡
概述 谷歌效果图如下: ie效果图如下: 完整代码 <!DOCTYPE html> <html> <head> <meta charset="gbk ...
- 作为一名CEO
你 不能怕得罪人 不能奢望完成工作的时候 有太多的愉悦感 你 必须要去做左右为难但左右亦可的 操蛋决策 你 得脸皮够厚 肚囊儿宽超 什么事情都能快速消化 哪怕 是 一坨屎 你 还得 决不放弃 永不言败 ...
- Python学习系列之format用法
format是代替%s格式的方法 不需要理会数据类型的问题,在%s方法中的%s只能代替字符串类型 填充方式十分灵活,对其方式十分强大 format填充字符串 通过位置来填充字符串 #format会把参 ...
- Objective-C 2.0 基础要点归纳
本文的阅读基本条件: 具备C/C++基础知识,了解面向对象特征 阅读过<Objective-C 2.0 程序设计(第二版)>.<Objective-C 程序设计 第6版>或相关 ...
- [办公自动化]名师推荐-excelpro刘万祥 图表之道作者
最早认识刘万祥老师是通过孙小小老师的博客.后来发现制作图表,还真需要和PPT类似,花些时间琢磨一下. 首先你要了解图表的类型,然后需要了解制作方法,最后就是如何美化以及结合PPT等工具帮你分析数据. ...