井井客

搜索

jq不间断向上滚动代码完全兼容

同事弄的JQ向上滚动代码,我稍微把整理了一下,各个浏览器都有测试过,兼容性良好!很实用的滚动代码!

jq不间断向上滚动代码完全兼容

整体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq不间断向上滚动代码完全兼容</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style>
ul,li { margin:0; padding:0; border:0;}
.warp { height:90px; overflow:hidden; font-size:14px;}
ul li { height:30px; line-height:30px;}
ul li.li01 { background:#9CF;}
ul li.li02 { background:#FFC;}
ul li.li03 { background:#CFF;}
ul li.li04 { background:#69F;}
ul li.li05 { background:pink;}
ul li.li06 { background:yellow;}
</style>
</head>
<body>
<div class="warp">
    <ul id="scroll">
        <li class="li01">111111111111</li>
        <li class="li02">222222222222</li>
        <li class="li03">333333333333</li>
        <li class="li04">444444444444</li>
        <li class="li05">555555555555</li>
        <li class="li06">666666666666</li>
    </ul>
</div>
<script type="text/javascript"> 
function autoScroll(obj){ 
        $(obj).animate({ 
                marginTop:"-30px" 
        },1000,function(){ 
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
        });         
} 
setInterval('autoScroll("#scroll")',3000);
</script>
</body>
</html>

目标是让li标签一条一条不间断向上滚动,样式配合JQ实现出来也很兼容~

需要注意的是li标签外面的ul不能限制高度,而再外面的div则需要限制高度。

代码解释:
(1)从下面的setInterval开始看,每3秒执行一次autoScroll函数,并将选择器进行传参。
(2)autoScroll函数内先是执行:整个ul逐渐向上移动30像素(等于一个li的高度),这时的margin-top为30像素;
(3)然后1S后执行将ul的margin-top重置为0,且将ul中的第一个li标签移到未尾。
(4)最后,实际差不多2秒后,再重新开始从(2)条如说的进行重复操作,以达到不间断向上滚动的效果。

虽然说是不间断向上滚动,但是实际上是会有一种一顿一顿的感觉,不过我个人还是满喜欢这种的。

另外修改了一下这里面的JQ滚动代码:

<script type="text/javascript"> 
function autoScroll(obj){ 
        $(obj).animate({ 
                marginTop:"-30px" 
        },1500,function(){ 
                $(this).css({marginTop:"0px"});
				$(this).find("li:first").appendTo(this); 
				autoScroll($(this));
        });         
} 
autoScroll("#scroll");
</script>

虽然有顿的感觉,但是相较上一个则更偏向于连续的了。

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:jq不间断向上滚动代码完全兼容
本文链接:/c/3193.html

上一篇:Jquery操作表单select下拉菜单切换显示内容
下一篇:JS与JQ获取浏览器和屏幕尺寸

文章分类

相关阅读

随便看看