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 相关文章推荐
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
在antd4.0中Form使用initialValue操作
Nov 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python实现动态数组的示例代码
2019/07/15 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
什么是唯一索引
2015/07/05 面试题
学生会竞选自荐信
2013/10/12 职场文书
委托书范本
2014/04/02 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
辩论会主持词
2015/07/03 职场文书