jquery实现文字单行横移或翻转(上下、左右跳转)
通过jquery的animate实现上下单行自动跳转
<scripttype="text/javascript"src="__ROOT__/Style/H/js/jquery-1.7.2.min.js"></script> <style> .rool-div{ height:50px; width:700px; margin:0auto; position:relative; overflow:hidden; border:2pxsolidred; } .roll{ height:50px; width:700px; margin:0auto; } .rollspan{ display:block; height:50px; width:700px; line-height:50px; } a{ text-decoration:none; display:inline-block; } </style> <divclass="rool-div"> <divclass="roll"id="roll"> <span><ahref="#">1.LoremIpsumissimplydummytextoftheprintingandtypesettingindustry</a></span> <span><ahref="#">2.Itisalongestablishedfactthatareaderwillbedistracted</a></span> <span><ahref="#">3.Manydesktoppublishingpackages</a></span> <span><ahref="#">4.AlltheLoremIpsumgeneratorsontheInternettendtorepeatpredefined</a></span> <span><ahref="#">5.ThestandardchunkofLoremIpsumused</a></span> <span><ahref="#">6.Englishversionsfromthe1914translationbyH.Rackham.</a></span> <span><ahref="#">7.BumetindenemeamaçlıdırthestandardchunkofLoremIpsumused</a></span> </div> </div> <script> (function($){ $.fn.extend({ Roll:function(){ returnthis.each(function(){ varn=0; $('#rollspana').hover(function(){ $(this).css('color','red'); },function(){ $(this).css('color','green'); }); vartimername=setInterval(function(){Play()},1000); $("#roll").hover( function() { clearInterval(timername); }, function() { timername=setInterval(function(){Play()},1000); }); functionPlay(){ if($("#roll>span").length>n) n++; else n=1; $("#roll").animate({'marginTop':-($("#rollspan").height())*(n-1)}); } }); } }) })(jQuery); </script>
二 通过scrollLeft函数实现自动左右移动(谷歌浏览器偶尔不能移动)
<styletype="text/css"> #demo{overflow:hidden;width:740px;} #indemo{float:left;width:800%;} #demo1{float:left;} #demo2{float:left;margin-left:7px;} </style> <scriptsrc="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script> <divid="demo"> <divid="indemo"> <divid="demo1"> <ahref="#"><imgsrc="zhuanpan/images/pointer.png"alt="#"/></a> <ahref="#"><imgsrc="zhuanpan/images/pointer.png"alt="#"/></a> <ahref="#"><imgsrc="zhuanpan/images/pointer.png"alt="#"/></a> <ahref="#"><imgsrc="zhuanpan/images/pointer.png"alt="#"/></a> <ahref="#"><imgsrc="zhuanpan/images/pointer.png"alt="#"/></a> <ahref="#"><imgsrc="zhuanpan/images/pointer.png"alt="#"/></a> </div> <divid="demo2"></div> </div> </div> <script> varspeed=10; vartab=document.getElementById("demo"); vartab1=document.getElementById("demo1"); vartab2=document.getElementById("demo2"); $("#demo2").text($("#demo1").clone()); $("#demo2").clone(); functionMarquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } varMyMar=setInterval(Marquee,speed); tab.onmouseover=function(){clearInterval(MyMar)}; tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)}; </script>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!