UL中LI滚动的特效

最新推荐文章于 2021-06-07 17:10:53 发布

陈小煋

最新推荐文章于 2021-06-07 17:10:53 发布

阅读量7.8k

点赞数 7

分类专栏： javascript 文章标签： javascript js 脚本滚动动画

本文链接：https://blog.csdn.net/Star_Chan/article/details/51456548

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $(document).ready(function(){
            var marginTop =0;
            var bool=false;
            setInterval(function(){
                if(bool) return;//判断运行和停止
                $(".text li:first").animate({marginTop:marginTop--},10,function(){
                    if(!($(this).is(":animated"))) {    //判断是否有一个动画节点
                        if ((-marginTop) >= $(this).height()) {  //判断移出位置是否超过高度
                            $(this).css("margin", "0");
                            $(this).appendTo($(".text"));  //把第一个节点移到ul后面
                            marginTop = 0;      //重新设置移动数值
                        }
                    }
            });
            },100);
            $(".text").mouseover(function(){   //li鼠标移入，停止移动
                bool=true;
            });
            $(".text").mouseout(function(){
                bool=false;
            });

        });
    </script>

</head>
<style>
    *{ margin:0px; padding: 0px;}
    .all{ width: 200px;margin: 0px auto;  }
    .text  {margin-top:100px; border: 1px solid black; height: 300px; overflow: hidden;}
    .text li{ list-style:none; text-align: center; height:30px; line-height:30px; border-bottom: 1px dashed #CCCCCC; }
</style>


<body>
<div class="all">
    <ul class="text">
        <li>文学馆</li>
        <li>文学</li>
        <li>小说</li>
        <li>青春文学</li>
        <li>传记</li>
        <li>动漫</li>
        <li>少儿馆</li>
        <li>儿童文学</li>
        <li>绘本</li>
        <li>科普百科</li>
    </ul>
</div>


</body>
</html>