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 相关文章推荐
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 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 操作符与控制结构
2012/03/07 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
Python 性能优化技巧总结
2016/11/01 Python
Python装饰器知识点补充
2018/05/28 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
学术会议邀请函
2015/01/30 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
python数字图像处理:图像简单滤波
2022/06/28 Python