zoukankan      html  css  js  c++  java
  • javascript 单行向上滚动文字

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>间断滚动</title>
    <style>
    #Marquee{ height:20px; overflow:hidden;}
    #Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:18px;}
    </style>
    </head>
    <body>
    <div id="Marquee">
    <div style=" 260px; height: 18px">
    xxxxxxxxxx
    </div>

    <div style=" 260px; height: 18px">

    yyyyyyyyyy
    </div>

    </div>
    <script>
    var Mar = document.getElementById("Marquee");
    var child_div=Mar.getElementsByTagName("div")
    var picH = 20;//移动高度
    var scrollstep=3;//移动步幅,越大越快
    var scrolltime=20;//移动频度(毫秒)越大越慢
    var stoptime=3000;//间断时间(毫秒)
    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>

  • 相关阅读:
    [css]继承关系(一)
    Trie树-提高海量数据的模糊查询性能
    [C]struct结构化数据的一些要点
    [C]表达式结合规律和运算符优先级
    [C]副作用和序列点
    [C]链接和生存周期
    [PHP]关于连接MySQL的问题
    IT网址大全
    VUE 生命周期
    Vue 组件间传值
  • 原文地址:https://www.cnblogs.com/lin3615/p/3590768.html
Copyright © 2011-2022 走看看