zoukankan      html  css  js  c++  java
  • 替换"marquee",实现无缝滚动

      js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就是left或者right,接下来是实现方法:实现li标签上下无缝滚动

      废话少说,粘贴代码,可以直接运行。

                        
    <!DOCTYPE html>
    <html>
      <head>
        <title>测试滚动</title>
        <!-- 引入在线Jquery -->
        <script src="http://code.jquery.com/jquery-latest.js"></script>
      </head>
      <style>
        #marquee li {
        height: 30px;
       }
      </style>

    <body>
      <div style="height:180px;overflow:hidden;">
        <div id="marquee">
          <li>
            <span>1.水规院自动化码头设计关键技术研究工作交流会顺利召开</span>
          </li>
          <li>
            <span>2.巨型通航建筑物通航标准体系研究</span>
          </li>
          <li>
            <span>3.中交集团跃居世界500强第210位</span>
          </li>
          <li>
            <span>4.中交股份获评多项长江口深水航道治理工程建设先进</span>
          </li>
          <li>
            <span>5.海南省与中交股份将全方位合作</span>
          </li>
          <li>
            <span>6.长江船舶设计院获中国标准创新贡献一等奖</span>
          </li>
        </div>
      </div>
    </body>
    <script>
      window.onload = function () {
        scrolldiv();
        // 鼠标停留,离开
        $("#marquee").mouseenter(function () {
          window.clearInterval(timename);
       });
        $("#marquee").mouseleave(function () {
          timename = setInterval("doScroll()", 50);
    });
    }
      var marquee = document.getElementById("marquee");
      var offset = 0;
      var scrollheight = marquee.offsetHeight;
      var length = marquee.children.length;
      function scrolldiv() {
        // 不可见处增加同等数量的li元素,模拟无缝连接(实际应该最上面li元素
        // 滚动到不可见之后,删除最上面li元素,再给div末尾添加删除的li元素)
        for (vari = 0; i < length - 1; i++) {
          var node = marquee.children[i].cloneNode(true);
          marquee.appendChild(node);
      }
        // 执行滚动,利用margin-top
        timename = setInterval("doScroll()", 50);
    }
      function doScroll() {
        if (offset == scrollheight) {
          offset = 0;
    }
        marquee.style.marginTop = "-" + offset + "px";
        offset += 1;
    }
    </script>
    </html>
    
    

     核心思路:1.增加可见高度的元素(appendChild)。

            2.定时刷新margin-top使div上移模拟滚动。

     以上技术参考其他人,如有侵权,欢迎来电。

     
  • 相关阅读:
    JS学习之构造函数、原型、原型链
    JS学习之面向对象(面向对象的创建方法,new运算符的工作原理)
    JS学习之事件流
    JS学习之生命周期与垃圾回收机制
    关于在XP操作系统和IIS5.1环境下的MVC环境搭建之IIS错误
    VS2010、.net 4.0下MVC3开发中Code First开发模式的数据迁移小结
    关于MVC3框架下的Jquery异步请求函数的学习心得之一——$.post()
    关于ASP调用存储过程的经典资料转载
    关于windows环境下的IIS 500内部服务器错误的一种解决办法
    接VS2010+Net+MVC3+EF4.1环境下的Code First一文的补充说明
  • 原文地址:https://www.cnblogs.com/chenboaixuexi/p/8526627.html
Copyright © 2011-2022 走看看