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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！