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>

  • 相关阅读:
    .net导出Excel几种方式比较
    各种loading加载中gif图标
    鼠标右键Table的td弹出多级菜单,双击td编辑
    解决远程连接超过最大数
    JQuery1.72中二个Bug,formhtml()方法与clone()方法的二个Bug进行重写
    Wijmo 2017路线图
    Wijmo 2016 V3发布
    ComponentOne 2016 V3 发布
    Angular2正式版发布,Wijmo抢先支持
    最好的Angular2表格控件
  • 原文地址:https://www.cnblogs.com/frustrate2/p/1390882.html
Copyright © 2011-2022 走看看