【动画】碰撞反弹

发布于 2020-08-02  204 次阅读 本文共3478个字


话不多说,直接上code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画方向切换(碰撞反弹)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        #demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 30px;
            left: 600px;
            border-radius: 50%;
        }

        .btn {
            width: 400px;
            margin: 150px auto;
        }

        .btn a {
            display: inline-block;
            width: 100px;
            line-height: 50px;
            background-color: greenyellow;
            margin: 0 10px;
            text-align: center;
            border: 2px solid darkgoldenrod;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<div class="btn">
    <a href="javascript:;" id="btnLeft">向左</a>
    <a href="javascript:;" id="btnStart">开始/暂停</a>
    <a href="javascript:;" id="btnRight">向右</a>
</div>
<script src="utils.js"></script>
<script type="text/javascript">
    var oDiv = document.getElementById('demo'), btnLeft = document.getElementById('btnLeft'), btnRight = document.getElementById('btnRight'), btnStart = document.getElementById('btnStart');
    var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oDiv.offsetWidth, initPos = utils.css(oDiv, 'left');
    btnStart.flag = 1;
    btnStart.onclick = function () {
        var target = null;
        this.flag === 1 ? target = maxLeft : target = 0;
        if (oDiv.run) {
            clearInterval(oDiv.timer);
            oDiv.run = false;
            return;
        }
        move(target);
    };
    btnLeft.onclick = function () {
        btnStart.flag === 1 ? btnStart.flag *= -1 : null;
        move(0);
    };
    btnRight.onclick = function () {
        btnStart.flag == -1 ? btnStart.flag *= -1 : null;
        move(maxLeft);
    };
    function move(target) {
        oDiv.run = true;
        _move();
        function _move() {
            clearInterval(oDiv.timer);
            var curPos = null;
            if (target) {
                curPos = utils.css(oDiv, 'left');
                curPos += 5;
                if (curPos >= target) {
                    utils.css(oDiv, 'left', maxLeft);
                    target = 0;
                    btnStart.flag *= -1;
                    oDiv.timer = setTimeout(_move, 10);
                    return;
                }
                utils.css(oDiv, 'left', curPos);
            } else {
                curPos = utils.css(oDiv, 'left');
                curPos -= 5;
                if (curPos <= target) {
                    utils.css(oDiv, 'left', 0);
                    target = maxLeft;
                    btnStart.flag *= -1;
                    oDiv.timer = setTimeout(_move, 10);
                    return;
                }
                utils.css(oDiv, 'left', curPos);
            }
            oDiv.timer = setTimeout(_move, 10);
        }
    };
</script>
</body>
</html>

附带utils方法库在此:

'use strict';
var utils = (function() {
  var isSupport = 'getComputedStyle' in window;
  // The style properties of the operating element, including the capture style, the individual settings style, and the batch settings style
  function css() {
      var arg = arguments;
      if (arg.length >= 3) {
          //->SET CSS
          setCss.apply(this, arg);
          return;
      }
      if (arg.length === 2 && typeof arg[1] === 'object') {
          //->SET GROUP CSS
          setGroupCss.apply(this, arg);
          return;
      }
      return getCss.apply(this, arg);
  };
  // Set the style attribute value for the batch
  function setGroupCss(curEle, styleCollection) {
      for (var key in styleCollection) {
          if (styleCollection.hasOwnProperty(key)) {
              setCss(curEle, key, styleCollection[key]);
          }
      }
  };
  // Set the style property value for an element,Setting inline styles for elements
  function setCss(curEle, attr, value) {
      if (attr === 'float') {
          curEle['style']['cssFloat'] = value;
          curEle['style']['styleFloat'] = value;
          return;
      }
      if (attr === 'opacity') {
          curEle['style']['opacity'] = value;
          curEle['style']['filter'] = 'alpha(opacity=' + value * 100 + ')';
          return;
      }
      var reg = /^(?:width|height|(?:(?:margin|padding)?(?:top|left|right|bottom)))$/i;
      if (reg.test(attr)) {
          !isNaN(value) ? value += 'px' : null;
      }
      curEle['style'][attr] = value;
  };
  // Gets the value of the specific style property for the current element
  function getCss(curEle, attr) {
      var val = null,
          reg = null;
      if (isSupport) {
          val = window.getComputedStyle(curEle, null)[attr];
      } else {
          //->IE6~8
          switch (attr) {
              case 'filter':
              case 'opacity':
                  val = curEle.currentStyle['filter'];
                  reg = /alpha\(opacity=(.+)\)/i;
                  val = reg.test(val) ? RegExp.$1 / 100 : 1;
                  break;
              default:
                  val = curEle.currentStyle[attr];
          }
      }
      reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i;
      val = reg.test(val) ? parseFloat(val) : val;
      return val;
  }
  return {
    css,
  }
})();

好啦~ 试试效果如何?!


努力,只为遇见更好的自己!