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>

  • 相关阅读:
    【笔记】黄如花.信息检索.学习心得
    【心得】Lattice和Xilinx工具关键特性对比(Diamond、ISE)
    【导航】FPGA相关
    【笔记】黄如花.信息检索.前4章心得(新增大牛汇总的公开课资源)
    python正则表达式练习题
    python正则表达式(1)--特殊字符
    【转】什么时候 i = i + 1 并不等于 i += 1?
    Linux查看文件指定行数内容
    python mysqldb批量执行语句executemany
    linux命令行常用快捷键
  • 原文地址:https://www.cnblogs.com/frustrate2/p/1390882.html
Copyright © 2011-2022 走看看