效果图:
实现文字自动横移
<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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持北冥有鱼!
您可能感兴趣的文章:
- jquery xMarquee实现文字水平无缝滚动效果
- jquery单行文字向上滚动效果示例
- JQuery文字列表向上滚动的代码
- jQuery实现公告文字左右滚动的实例代码
- jquery实现文字由下到上循环滚动的实例代码
- jQuery实现单行文字间歇向上滚动源代码
- jquery文字上下滚动的实现方法
- jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
- jquery实现marquee效果(文字或者图片的水平垂直滚动)
- jQuery循环滚动展示代码 可应用到文字和图片上