H5，提示信息，跑马灯

最新推荐文章于 2024-04-24 09:27:42 发布

猴子年华、

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量312

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/lg632/article/details/121207319

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

跑马灯：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #Marquee{ height:20px; overflow:hidden;margin:10px auto 5px 25px;}
    </style>
</head>
<body>
    <div id="Marquee">
        <div style="height: 58px">客服电话：0311 - 123456789</div>
        <div style="height: 58px">客服微信：1234562017</div>
        <div style="height: 58px">技术人员电话：151 0123 6547</div>
        <div style="height: 58px">工作时间：8:00 - 17:30</div>
    </div>
    <script>
        var Mar = document.getElementById("Marquee");
        var child_div=Mar.getElementsByTagName("div");
        var picH = 60;//移动高度
        var scrollstep=3;//移动步幅,越大越快
        var scrolltime=20;//移动频度(毫秒)越大越慢
        var stoptime=5000;//间断时间(毫秒)
        var tmpH = 0;
        Mar.innerHTML += Mar.innerHTML;
        function start(){
            if(tmpH < picH){
                tmpH += scrollstep;
                if(tmpH > picH )tmpH = picH ;
                Mar.scrollTop = tmpH;
                setTimeout(start,scrolltime);
            }else{
                tmpH = 0;
                Mar.appendChild(child_div[0]);
                Mar.scrollTop = 0;
                setTimeout(start,stoptime);
            }
        }
        onload=function(){setTimeout(start,stoptime)};
    </script>
</body>
</html>

猴子年华、

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5，提示信息，跑马灯

跑马灯：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #Marquee{ height:20px; overflow:hidden;margin:10px auto 5px 25px;} </style></h
复制链接

扫一扫