jQuery实现文字自动横移


Posted in Javascript onJanuary 08, 2017

效果图:

jQuery实现文字自动横移

实现文字自动横移

<style type="text/css">
#demo {overflow:scroll;width:740px; } 
#indemo { float: left; width: 800%;}
#demo1 { float: left; }
#demo2 { float: left;margin-left:7px;}
</style>
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<div id="demo">
 <div id="indemo">
 <div id="demo1">
  <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
  <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
  <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
 </div>
 <div id="demo2"></div> </div>
</div>
一 采用jquery方式实现文字横移
<script>
 var speed=20;
 $("#demo2").html($("#demo1").children().clone());
 var n=0;
 function Marquee(){
 if(n>=$("#demo").innerWidth())
  n=0;
 else{
  n++;
 }
 $("#demo").scrollLeft( n );
 }
var MyMar=setInterval(Marquee,speed);
 $("#demo").mouseover(function(){clearInterval(MyMar)});
 $("#demo").mouseout(function(){MyMar=setInterval(Marquee,speed)});
</script>
二 采用原生script实现横移
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
$("#demo2").text($("#demo1").clone());
$("#demo2").clone();
function Marquee(){
 if(tab2.offsetWidth-tab.scrollLeft<=0)
 tab.scrollLeft-=tab1.offsetWidth
 else{
 tab.scrollLeft++;
 }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 #Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 #Javascript
详解js中==与===的区别
Jan 08 #Javascript
JavaScript 动态三角函数实例详解
Jan 08 #Javascript
你不知道的 javascript【推荐】
Jan 08 #Javascript
js时间控件只显示年月
Jan 08 #Javascript
javascript函数的四种调用模式
Jan 08 #Javascript
You might like
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python重试装饰器的简单实现方法
2019/01/31 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python用requests实现http请求代码实例
2019/10/31 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
武汉瑞得软件笔试题
2015/10/27 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
数据员岗位职责
2013/11/19 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
学生检讨书
2015/01/27 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript