jquery的单行循环滚动示例

最新推荐文章于 2025-04-12 13:54:06 发布

iteye_21270

最新推荐文章于 2025-04-12 13:54:06 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 上下滚动 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_21270/article/details/82197073

jquery 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
        ul, li
        {
            margin: 0;
            padding: 0;
        }
        #scrollDiv
        {
            width: 300px;
            height: 25px;
            line-height: 25px;
            border: #ccc 1px solid;
            overflow: hidden;
        }
        #scrollDiv li
        {
            height: 25px;
            padding-left: 10px;
        }
    </style>

<script src="./jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    
        function AutoScroll(obj) {

            $(obj).find("ul:first").animate({
                marginTop: "-25px"
            }, 500, function() {
                $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
            });
        }
        $(document).ready(function() {
            var myar = setInterval('AutoScroll("#scrollDiv")', 1000)
            $("#scrollDiv").hover(function() { clearInterval(myar); }, function() { myar = setInterval('AutoScroll("#scrollDiv")', 1000) }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
        });
    </script>

</head>
<body>
    <div id="scrollDiv">
        <ul>
             <li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
            <li><a href="http://www.163.com">欢迎浏览网易</a></li>
            <li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
            <li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
            <li><a href="http://www.msdn.com">msdn</a></li>
            <li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
        </ul>
    </div>
</body>
</html>