文字上下滚动

文字上下滚动


<!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)
 })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值