zoukankan      html  css  js  c++  java
  • 简单JS实现走马灯效果的文字(无需jQuery)

    效果类似:(抱歉,图片是静态的)

    9-21-2009 11-34-09

    写一段html,需要走马灯上下跳动的内容,但每次只显示一行:

    <hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/>
    <div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;"><a href="/"  target="_blank">测试第一行</a>
       <br/><a href="/"  target="_blank">测试第二行</a>
       <br/><a href="/"  target="_blank">测试第三行</a>
       <br/><a href="/"  target="_blank">测试第四行</a>
       <br/><a href="/" target="_blank">测试第五行</a>
       <br/>
    </div>

    实现走马灯效果的简单JS:

    /*开始走马灯*/
    function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){
      var t;
      var p=false;
      var o=document.getElementById(id);
      o.innerHTML+=o.innerHTML;
      o.onmouseover=function(){p=true}
      o.onmouseout=function(){p=false}
      o.scrollTop = 0;
      function start(){
        t=setInterval(scrolling,speed);
        if(!p) o.scrollTop += 2;
      }
      function scrolling(){
        if(o.scrollTop%lh!=0){
        o.scrollTop += 2;
        if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
        }else{
        clearInterval(t);
        setTimeout(start,delay);
        }
      }
      setTimeout(start,delay);
    }
    
    /*启动效果*/
    try{
    startmarquee(26,50,3000,"marqueebox0");
    }catch(e){}
  • 相关阅读:
    JBoss 系列十八:使用JGroups构建块RpcDispatcher构建群组通信应用
    TJU Easier Done than Said?
    [置顶] 程序员面试之道(《程序员面试笔试宝典》)之如何回答系统设计题?
    百度2014校园招聘笔试题 ——深度学习算法研发工程师.
    SpringCloud常用注解
    @PrePersist
    【转】http_load压力测试过程和使用方式
    handlermethodargumentresolver
    云计算的三种服务模式:IaaS,PaaS和SaaS
    pip install 升级时候 出现报asciii码错误的问题。
  • 原文地址:https://www.cnblogs.com/Mainz/p/1570872.html
Copyright © 2011-2022 走看看