您的位置：首页 > 其它

autoRoll_UpDown()|上下滚动函数|无缝|自动（自带demo）

2014-10-30 17:01 330 查看

autoRoll_UpDown函数

function autoRoll_UpDown($domObj,speed){  //$domObj 外围容器的jQuery式元素对象   speed 滚动速度，单位毫秒
var speed = speed || 3000;   //默认速度3秒
var len = $domObj.children().length;
var chiH = $domObj.children().height();
if(len>1){
$domObj.append($domObj.html());
var pointRoll = 0;
function move(){
pointRoll++;
if(pointRoll > len){
pointRoll = 1;
$domObj.css('top','0px');
}
$domObj.animate({top:-chiH*pointRoll+"px"});
}
var time = setInterval(move,speed)
$domObj.hover(function(){
clearInterval(time);
},function(){
time = setInterval(move,speed)
})

}
}

下边是一个已经跑通的demo

<html>
<head>
<title>（demo）自动-无缝-上下滚动</title>
<script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>
<link type="text/css" rel="stylesheet" href="http://i.tq121.com.cn/c/core.css">
</head>
<body>
<style>
*{padding:0; margin:0;}
div{ margin:100px;height:50px;width:200px; overflow:hidden; position:relative; }
ul{ position:absolute; top:0; left:0; width:100px;}
ul li{ height:50px; width:200px; text-align:center; line-height:50px;color:#fff; cursor:pointer;}
</style>
<div>
<ul>
<li style="background:red;">11</li>
<li style="background:blue;">22</li>
</ul>
</div>
<script>
var $U = $('ul');
//autoRoll_UpDown($U); //默认滚动速度3秒
autoRoll_UpDown($U,1000);  //设置滚动速度 1秒

function autoRoll_UpDown($domObj,speed){
var speed = speed || 3000;   //默认速度3秒
var len = $domObj.children().length;
var chiH = $domObj.children().height();
if(len>1){
$domObj.append($domObj.html());
var pointRoll = 0;
function move(){
pointRoll++;
if(pointRoll > len){
pointRoll = 1;
$domObj.css('top','0px');
}
$domObj.animate({top:-chiH*pointRoll+"px"});
}
var time = setInterval(move,speed)
$domObj.hover(function(){
clearInterval(time);
},function(){
time = setInterval(move,speed)
})

}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航