文字上下滚动

最新推荐文章于 2021-05-29 10:54:30 发布

「已注销」

最新推荐文章于 2021-05-29 10:54:30 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wangbei85/article/details/53609808

jquery 专栏收录该内容

7 篇文章

订阅专栏

文字上下滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0px auto;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 600px;
            height: 50px;
            background-color:pink;
            border:1px solid red;
            margin-top:100px;
            position: relative;
            overflow: hidden;
        }
        .box1{
            width: 600px;
            height: 600px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .box1 li{
            width: 600px;
            height:50px;
            line-height: 50px;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var num=0;
            $(".box1 li:first").clone().appendTo(".box1")
            function func(){
                if(num<3){
                    num++
                    $(".box1").animate({"top":num*-50},1000)
                }else{
                    num=0
                    $(".box1").animate({"top":4*-50},1000,function(){
                        $(".box1").css("top",0)

                    })
                }
            }
            var timer=setInterval(func,2000)
            $(".box").mouseenter(function(){
                clearInterval(timer)
            })
            $(".box").mouseleave(function(){
                clearInterval(timer)
                timer=setInterval(func,2000)
            })
        })
    </script>
</head>
<body>
    <!-- <button>按钮</button> -->
    <div class="box">
        <ul class="box1">
            <li>
                要强化灾害风险防范措施，加强灾害风险隐患排查和治理
            </li>
            <li>
                落实责任、完善体系、整合资源、统筹力量，全面提高国家综合防灾减灾
            </li>
            <li>
                以保护水资源、防治水污染、改善水环境、修复水生态为主要任务
            </li>
            <li>
                协调有序、监管严格、保护有力的河湖管理保护机制
            </li>
        </ul>
    </div>
</body>
</html>

注意要引进jquery包，格式如下：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

jquery包的版本号不一定是3.1.1；可以是其他版本。
可以先用button按钮控制文字的滚动；最后再加定时器；让文字自动滚动。
当鼠标移动到box上时，文字就不滚动，离开就再滚动，代码如下:

$(".box").mouseenter(function(){
     clearInterval(timer)
})
 $(".box").mouseleave(function(){
     clearInterval(timer)
     timer=setInterval(func,2000)
 })