zoukankan      html  css  js  c++  java
  • 自己写的无缝滚动字幕marquee,上下左右皆可滚动,兼容FF

    maquee.js内容如下:

    // JavaScript Document
     var Marquee = function(id){
      function $(id){return document.getElementById(id);}
      var m = this, div = $(id), inner, width, height, style, direct;
      inner = div.innerHTML; direct = 1;
      this.width = 400; this.height = 300;
      function resetCSS(){
       if(div.style.width == null || div.style.width == ""){
        div.style.width = m.width + "px";
       } else {
        m.width = parseInt(div.style.width);
       }
       if(div.style.height == null || div.style.height == ""){
        div.style.height = m.height + "px";
       } else {
        m.height = parseInt(div.style.height);
       }
       style = "" + m.width + "px; height:" + m.height + "px; overflow:hidden; float:left;";
      }
      
      this.interval = 100; this.step = 1; this.timer = null;
      this.stop = function(){ window.clearTimeout(m.timer); m.timer = null;}
      this.MoveLeft=function(){createScrollX();m.stop();m.timer=window.setTimeout(marquee_left,m.interval);}
      this.MoveRight=function(){createScrollX();m.stop();m.timer=window.setTimeout(marquee_right,m.interval);}
      this.MoveUp=function(){createScrollY();m.stop();m.timer=window.setTimeout(marquee_up,m.interval);}
      this.MoveDown=function(){createScrollY();m.stop();m.timer=window.setTimeout(marquee_down,m.interval);}
      this.Continue = function(){switch(direct){case 1:m.MoveLeft();break;case 2:m.MoveRight();break;
       case 3:m.MoveUp();break;case 4:m.MoveDown();break;default:m.MoveLeft();break;}}
      div.onmouseover = m.stop; div.onmouseout = m.Continue;
      function createScrollX(){
       resetCSS(); div.style.overflowX="hidden"; div.style.overflowY="auto"; div.innerHTML="";
       var odiv=document.createElement("DIV"); odiv.style.width=(m.width * 2) + "px";
       div.appendChild(odiv);
       createSubDiv(odiv);
      }
      function createScrollY(){
       resetCSS(); div.style.overflowX="auto"; div.style.overflowY="hidden"; div.innerHTML="";
       var odiv=document.createElement("DIV"); odiv.style.height=(m.height * 2) + "px";
       div.appendChild(odiv);
       createSubDiv(odiv);
      }
      function createSubDiv(parent){
       var ldiv = document.createElement("DIV"); var rdiv = document.createElement("DIV");
       ldiv.style.cssText = rdiv.style.cssText = style; ldiv.style.float = rdiv.style.float = "left";
       ldiv.innerHTML = rdiv.innerHTML = inner;
       parent.appendChild(ldiv); parent.appendChild(rdiv);
      }
      function marquee_left(){
       if(div.scrollLeft - m.width >= 0){div.scrollLeft -= m.width;}else{div.scrollLeft += m.step;}
         direct=1; m.timer = window.setTimeout(marquee_left, m.interval);
      }
      function marquee_right(){
       if(div.scrollLeft <= 0){div.scrollLeft += m.width;}else{div.scrollLeft -= m.step;}
         direct=2; m.timer = window.setTimeout(marquee_right, m.interval);
      }
      function marquee_up(){
       if(div.scrollTop - m.height >= 0){div.scrollTop -= m.height;}else{div.scrollTop += m.step;}
         direct=3; m.timer = window.setTimeout(marquee_up, m.interval);
      }
      function marquee_down(){
       if(div.scrollTop <= 0){div.scrollTop += m.height;}else{div.scrollTop -= m.step;}
         direct=4; m.timer = window.setTimeout(marquee_down, m.interval);
      }
     }

    测试页面test.html内容如下:

    <title>Jsmarquee</title>
    <script language="javascript" src="marquee.js"></script>
    <IMG onMouseOver="moveThis('left')" style="cursor: pointer" onmouseout=moveout() height=30
                      src="images/goleft.gif" width=8>
     <div id="odiv" style=" height:78px;">
      <ul>
        <li>
         <a href="news_content.asp?id=337" target="_blank" title="公交部分线路改道通告">
          公交部分线路改道通告
         </a>
         (2010-3-9)
        </li>
        <li>
         <a href="news_content.asp?id=211" target="_blank" title="关于组织实施“提升公交形象百日行动计划”的意见">
          关于组织实施“提升公交形象百日行动计划”的意见
         </a>
         (2010-3-4)
        </li>
        <li>
         <a href="news_content.asp?id=158" target="_blank" title="春运简报第20期">
          春运简报第20期
         </a>
         (2010-3-2)
        </li>
              </ul>
     </div>
    <script language="javascript">
     var mar = new Marquee("odiv");
     mar.width = 300; mar.height = 200;
     mar.step = 3;mar.interval = 100;
     mar.MoveUp();
     //mar.MoveLeft(); mar.MoveRight(); mar.MoveDown();
    </script>
    <IMG onMouseOver="moveThis('right')" style="CURSOR: pointer" onmouseout=moveout() height=30
                      src="images/goright.gif" width=8>

  • 相关阅读:
    9.Nginx常用模块
    8.Nginx基本概述
    7.HTTP协议
    6. SSH远程管理服务实战
    5. Sersync实时同步
    docker 安装 rabbitMQ服务器
    rabbitmq pika(python)订阅发布多客户端消费场景简单使用
    rabbitmq和kafka大概比较
    flask接收跨域请求
    命令提示符出现-bash-4.1$如何解决
  • 原文地址:https://www.cnblogs.com/pricks/p/1683955.html
Copyright © 2011-2022 走看看