javascript简单滚动

By柏小白

javascript简单滚动

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>简单滚动</title>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
<body>
    <h1>简单滚动</h1>
    <style type="text/css">
/*简单滚动*/

.scroll{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
.scroll a{height:25px;display:block;padding-left:10px;}
</style>
    <!--简单滚动-->
    <div class="scroll">
        <div>
            <a>这是公告标题的第一行</a>
            <a>这是公告标题的第二行</a>
            <a>这是公告标题的第三行</a>
        </div>

    </div>
    <script type="text/javascript">

            // 简单滚动
            function AutoScroll(obj){
                $(obj).find("div").animate({
                    marginTop:"-25px"
                },1000,function(){
                    $(this).css({marginTop:"0px"}).find("a:first").appendTo(this);
                });
            }

            $(function(){
                setInterval('AutoScroll(".scroll")',3000)

            });



</script>

</body>

</html>

 





简单滚动


简单滚动

About the author

柏小白 administrator