通过jquery的animate实现上下单行自动跳转
我要评论
<script type="text/javascript" src="__root__/style/h/js/jquery-1.7.2.min.js"></script>
<style>
.rool-div{
height:50px;
width:700px;
margin:0 auto;
position: relative;
overflow: hidden;
border:2px solid red;
}
.roll{
height:50px;
width:700px;
margin:0 auto;
}
.roll span{
display:block;
height:50px;
width:700px;
line-height:50px;
}
a {
text-decoration:none;
display:inline-block;
}
</style>
<div class="rool-div">
<div class="roll" id="roll">
<span><a href="#">1. lorem ipsum is simply dummy text of the printing and typesetting industry</a></span>
<span><a href="#">2. it is a long established fact that a reader will be distracted</a></span>
<span><a href="#">3. many desktop publishing packages</a></span>
<span><a href="#">4. all the lorem ipsum generators on the internet tend to repeat predefined</a></span>
<span><a href="#">5. the standard chunk of lorem ipsum used</a></span>
<span><a href="#">6. english versions from the 1914 translation by h. rackham.</a></span>
<span><a href="#">7. bu metin deneme amaçlıdır the standard chunk of lorem ipsum used</a></span>
</div>
</div>
<script>
(function($){
$.fn.extend({
roll:function(){
return this.each(function(){
var n=0;
$('#roll span a').hover(function(){
$(this).css('color','red');
},function(){
$(this).css('color','green');
});
var timername=setinterval(function(){play()},1000);
$("#roll").hover(
function()
{
clearinterval(timername);
},
function()
{
timername=setinterval(function(){play()},1000);
});
function play(){
if($("#roll>span").length>n)
n++;
else
n=1;
$("#roll").animate({'margintop':-($("#roll span" ).height())*(n-1)});
}
});
}
})
})(jquery);
</script>
二 通过scrollleft函数实现自动左右移动（谷歌浏览器偶尔不能移动）
<style type="text/css">
#demo {overflow:hidden;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>
<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>
<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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论