JQuery文字轮播简单代码

最新推荐文章于 2021-05-30 19:16:14 发布

didashui2000

最新推荐文章于 2021-05-30 19:16:14 发布

阅读量731

点赞数

分类专栏： JS

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一个简单的文字滚动效果</title>
    <style>


        .text{
            width:200px;
            height:30px;
            overflow:hidden;
            cursor:pointer;
            margin:0 auto;
        }

        .text ul{
             margin:0px;
            padding:0px;
            list-style:none;

        }
        .text ul li{
            width:200px;
            height:30px;
            background:#333;
            line-height:30px;


        }

    </style>
</head>
<body>
<div id="container">
<h1>文字滚动效果</h1>
<div class="text">
    <ul>
        <li class="li1" style="color:orange">wellcoto</li>
        <li ><a style="color:green" href="http://lmrone.top">http://lmrone.top</a></li>
        <li  style="color:blue">web前端学习</li>
    </ul>
</div>
</div>
<script type="text/javascript" src="http://www.mypreamic.com/js/magenthemes/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    jQuery(function(){
        //文字滚动的函数
        function textslide(){

            var height=(jQuery('.text ul li').height());//获取li的高度
            //让第一个向上30px,完成之后，再把这个li添加到li的最后，然后把它的marginTop还原到0
            jQuery('.text ul li').eq(0).animate({marginTop:-height},function(){
                jQuery(this).remove().appendTo('.text ul').css({marginTop:0})
            });

        }
        //每隔3s执行一次文字的滚动
        var t=setInterval(textslide,1000);


        //当鼠标触碰到text区域时，停止滚动，就需要清除计时器clearInterval

        jQuery('.text').hover(function(){
           clearInterval(t);
           //当鼠标离开text区域时，继续滚动
        },function(){
            t=setInterval(textslide,1000);
        })


    })

</script>
</body>
</html>