文字无限无缝滚动效果——和派孔明<script src="jquery-1.7.2.oDiv.}).}).var oLi

文字无限无缝滚动效果——和派孔明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100px;height:20px;margin:0 auto;overflow:hidden;}
#div1 li{width:100px;height:20px;line-height: 20px;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function() {
    var oDiv = $("#div1");
    var timer = null;
    oDiv.mouseover(function() {
        clearInterval(timer);
    }).mouseout(function() {
        timer = setInterval(function() {
            scroll(oDiv);
        },2000);
    }).trigger("mouseout");
});

function scroll(obj) {
    var oLi = obj.find("ul:first");
    var lineHeight = oLi.find("li:first").height();
    oLi.animate({
        "margin-top": -lineHeight + "px"
    },
    500,
    function() {
       oLi.css({
            "margin-top": "0px"
        }).find("li:first").appendTo(oLi);
    })
}
</script>
</head>
<body>
    <div id="div1">
        <ul>
            <li><a href="javascript:;">111111111111</a></li>
            <li><a href="javascript:;">222222222222</a></li>
            <li><a href="javascript:;">333333333333</a></li>
            <li><a href="javascript:;">444444444444</a></li>
            <li><a href="javascript:;">555555555555</a></li>
        </ul>
    </div>
</body>
</html>