跑马灯--跳坑之旅

在门户首页需要添加一个跑马灯要实现，图片进行展示匀速向左，移入暂停，移出继续。左右按钮可以进行点击。

html实现功能

 <marquee behavior="behavior" width="200" loop="2">文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</marquee>

这个标签没有记录W3C规范之内，再考虑到展示效果是有段空白，不能无缝连接，所以决定放弃

css 实现功能（css3新特性）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>跑马灯效果</title>
    <style type="text/css">
      * {
    
    
        padding: 0;
        margin: 0;
      }
      #move {
    
    
        position: relative;
        width: 230px;
        height: 20px;
        background: grey;
        color: white;
        overflow: hidden;
      }
      #cont {
    
    
        width: 200%;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
        animation: 5s move infinite linear;
      }
      #cont .text {
    
    
        display: inline-block;
        float: left;
        width: 50%;
        height: 20px;
      }
      @keyframes move {
    
    
        0% {
    
    
          left: 0;
        }
        100% {
    
    
          left: -100%;
        }
      }
    </style>
  </head>
  <body>
    <div id="move">
      <div id="cont">
        <div class="text">1 滚动吧，就这样滚动，就是这种效果</div>
        <div class="text">2 滚动吧，就这样滚动，就是这种效果</div>
      </div>
    </div>
  </body>
</html>

实际上是利用两条重复的数据进行衔接，但是需求要兼容ie8所以这种方式也放弃了。

所以为了恶心的ie8还的原生js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>game1</title>
    <style type="text/css">
      .tt {
     
     
        width: 145px;
        height: 106px;
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 10px;
        display: block;
        float: ;
      }
    </style>
  </head>
  <body>
    <div
      id="colee_left"
      style="
        width: 1050px;
        height: 150px;
        border: 1px solid #e8e8e8;
        margin-top: 10px;
        overflow: hidden;
        background-color: yellow;
      "
    >
      <table cellpadding="0">
        <tbody id="box">
          <tr>
            <td id="colee_left1" valign="top">
              <table>
                <tbody>
                  <tr align="center">
                    <td>
                      <a href="#">
                        <img class="tt" src="1.jpg" />
                      </a>
                    </td>
                    <td>
                      <a href="#">
                        <img class="tt" src="1.jpg" />
                      </a>
                    </td>
                    <td>
                      <a href="#">
                        <img class="tt" src="1.jpg" />
                      </a>
                    </td>
                    <td>
                      <a href="#">
                        <img class="tt" src="1.jpg" />
                      </a>
                    </td>
                    <td>
                      <a href="#">
                        <img class="tt" src="1.jpg" />
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td id="colee_left2" valign="top"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  <script type="text/javascript">
    var speed = 30;
    //速度数值越大速度越慢
    var colee_left2 = document.getElementById("colee_left2");
    var colee_left1 = document.getElementById("colee_left1");
    var colee_left = document.getElementById("colee_left");
    var box = document.getElementById("box");
    colee_left2.innerHTML = colee_left1.innerHTML;
    function Marquee3() {
     
     
      if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) {
     
     
        //offsetWidth 是对象的可见宽度
        colee_left.scrollLeft -= colee_left1.offsetWidth; //scrollWidth 是对象的实际内容的宽，不包边线宽度
      } else {
     
     
        colee_left.scrollLeft++;
      }
    }
    var MyMar3 = setInterval(Marquee3, speed);
    // 移入清除定时器
    box.onmouseover = function () {
     
     
      clearTimeout(MyMar3);
    };
    // 移出打开定时器
    box.onmouseout = function () {
     
     
      MyMar3 = setInterval(Marquee3, speed);
    };
  </script>
</html>

这个思路可以实现左右按钮点击移动一个图片的宽度
唯一的瑕疵就是谷歌90%的时候不移动

跑马灯--跳坑之旅

猜你喜欢