zoukankan      html  css  js  c++  java
  • [转载 js] 不间断滚动类

       在blueidea看到的代码,不错,转过来。

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>不间断滚动</title>
    <style>
    #Marquee{ height:180px; overflow:hidden;}
    #Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
    #Marquee2{ height:180px; overflow:hidden;}
    #Marquee2 div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
    </style>
    </head>
    <body>
    <div id="Marquee">
    <div>aaaaa</div>
    <div>bbbbbbbb</div>
    <div>cccccccccccc</div>
    <div>dddddddddddddddd</div>
    </div><br />
    <div id="Marquee2">
    <div>aaaaa</div>
    <div>bbbbbbbb</div>
    <div>cccccccccccc</div>
    <div>dddddddddddddddd</div>
    </div>
    </body>
    </html>
    <script>
    function Marquee(container,config){
    var cfg = {
       picH : 60,//图片高度
       count : 1,//一次滚动图片数量
       speed : 50,//滚动速度,越少越快
       tag : "div"//子元素的标签名
    };
    for(var p in config){
       cfg[p] = config[p];
    }
    this.box = document.getElementById(container);
    this.tmpH = 0;
    var _this = this;

    this.init = function(){
       this.box.innerHTML += this.box.innerHTML;
       this.timer = setTimeout(this.start,3000);
    }

    this.start = function(){
       _this.timer = setInterval(function(){
        _this.loop.call(_this);
       },cfg.speed);
    }

    this.loop = function(){
       if(this.tmpH < cfg.picH * cfg.count){
        this.tmpH += 3;
        if(this.tmpH > cfg.picH * cfg.count) this.tmpH = cfg.picH * cfg.count;
        this.box.scrollTop = this.tmpH;
       }else{
        this.tmpH = 0;
        for(var i = 0; i < cfg.count; i++){
         this.box.appendChild(this.box.getElementsByTagName(cfg.tag)[0]);
        }
        this.box.scrollTop = 0;
        clearInterval(this.timer);
        this.timer = setTimeout(this.start,3000);
       }
    }
    }
    var mar = new Marquee("Marquee",{count:2,speed:30});
    mar.init();
    var mar2 = new Marquee("Marquee2");
    mar2.init();
    </script>

  • 相关阅读:
    CodeForces 587A
    矩阵快速幂模板
    LCA模板
    Codeforces Round #226 (Div. 2 )
    Codeforces Round #225 (Div. 2)
    SGU132
    SRM 599 DIV 2
    POJ1038
    SGU223
    POJ1185
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427158.html
Copyright © 2011-2022 走看看