最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery实现文字单行横移或翻转(上下、左右跳转)
时间:2017-01-09 编辑:简简单单 来源:一聚教程网
通过jquery的animate实现上下单行自动跳转
代码如下 | 复制代码 |
.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;
}
(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);
|
二 通过scrollLeft函数实现自动左右移动(谷歌浏览器偶尔不能移动)
代码如下 | 复制代码 |
#demo {overflow:hidden;width:740px; }
#indemo { float: left; width: 800%;}
#demo1 { float: left; }
#demo2 { float: left;margin-left:7px;}
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)};
|
-
下一个: jQuery实现文字自动横移
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31