zoukankan      html  css  js  c++  java
  • (网上转载)JavaScript 跑马灯

    一:不间断滚动 不间断跑马灯效果 比marquee连续

    <div id=maq style=overflow:hidden;height:100px;150px;>  
    <div id=mtext>  
    1.文字也是可以连续滚动的
    <br>  
    2.文字也是可以连续滚动的
    <br>  
    3.文字也是可以连续滚动的
    <br>  
    4.文字也是可以连续滚动的
    <br>  
    5.文字也是可以连续滚动的
    <br>  
    6.文字也是可以连续滚动的
    <br>  
    </div>  
    <div id=m0></div>  
    </div>  

    <script>  
    var speed=40 //调整滚动速度  
    m0.innerHTML=mtext.innerHTML  
    function Marquee(){  
    if(m0.offsetTop-maq.scrollTop<=0)  
    maq.scrollTop
    -=mtext.offsetHeight  
    else{  
    maq.scrollTop
    ++  
    }
      
    }
      
    var MyMar=setInterval(Marquee,speed)  
      maq.onmouseover
    =function() {clearInterval(MyMar)}  
      maq.onmouseout
    =function() {MyMar=setInterval(Marquee,speed)}  
    </script>   

    二:向上的无缝循环滚动

    <div align="center" id="demo" style="overflow:hidden;height:200px;95px;border-1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
        <div id="demo1">
            <!-- 定义内容-->
            <img src="images/logo_1.gif">
            <img src="images/logo/flashempire.gif">
            <img src="images/logo.gif">
            <img src="images/logo/5dmedia.gif">
            <img src="images/logo/macromedia.gif">
            <img src="images/logo/sucaiw.gif">
            <img src="images/logo/blueieda.gif">
            <img src="images/logo/htmlcn.gif">
            <img src="images/logo/fwcn.gif">
        </div>
        <div id="demo2"></div>
    </div>

    <script language="javascript" type="text/javascript">
    <!--
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    var speed=10;    //滚动速度值,值越大速度越慢
    demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
    function Marquee(){
        if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
            demo.offsetTop-=demo1.offsetHeight    //demo跳到最顶端
        else{
            demo.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee,speed);        //设置定时器
    demo.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的
    demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器
    -->
    </script>

  • 相关阅读:
    oracle shrink
    PL/SQL Developer登入时候报ORA-12638: 身份证明检索失败的解决办法
    Oracle11g搭建DataGuard及主备切换方法总结【亲测可用】
    Dataguard主、备库切换方法总结
    CentOS下的Mysql的安装和使用
    在HP-UX上部署oracle客户端
    ORACLE 清理SYSAUX表空间
    第02节-BLE协议各层的形象化理解
    第01节-生活中的实例_医院的结构
    仿照手机写一个WIFI的操作程序
  • 原文地址:https://www.cnblogs.com/frustrate2/p/1390882.html
Copyright © 2011-2022 走看看