码迷,mamicode.com
首页 > 其他好文 > 详细

autoRoll_UpDown()|上下滚动函数|无缝|自动

时间:2014-10-30 18:34:47      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   ar   java   sp   

<html>
<head>
<title>自动-无缝-上下滚动</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>

autoRoll_UpDown()|上下滚动函数|无缝|自动

标签:style   blog   http   io   color   os   ar   java   sp   

原文地址:http://www.cnblogs.com/liujinyu/p/4063177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!