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){}
  • 相关阅读:
    Ubuntu 16 安装redis客户端
    crontab 参数详解
    PHP模拟登录发送闪存
    Nginx配置端口访问的网站
    Linux 增加对外开放的端口
    Linux 实用指令之查看端口开启情况
    无敌的极路由
    不同的域名可以指向同一个项目
    MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details about the error
    Redis 创建多个端口
  • 原文地址:https://www.cnblogs.com/Mainz/p/1570872.html
Copyright © 2011-2022 走看看