源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript抖动元素的小例子

  • 时间:2022-03-05 12:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript抖动元素的小例子
[u]复制代码[/u] 代码如下:
 <!doctype html>  <html lang="zh">  <head>      <meta charset="utf-8">      <title>xxxxxx</title>      <style>      #control {          height: 100px;          width: 100%;          background: gray;      }      </style>      <script>      function shake(e, onComplete, distance, interval)      {          if (typeof e === "string")          {              e = document.getElementById(e);          } // end if          distance = distance || 8;          interval = interval || 800;          var originalStyle = e.style.cssText;          e.style.position = "relative";          var start = (new Date()).getTime();          animate();          function animate()          {              var now = (new Date()).getTime();              var elapsed = now - start;              var progress = elapsed / interval;              if (progress < 1)              {                  var y = distance * Math.sin(Math.PI * progress * 4);                  var x = distance * Math.cos(Math.PI * progress * 4);                  e.style.left = x + "px";                  e.style.top = y + "px";                  console.log(e.style.cssText);                  setTimeout(animate, Math.min(25, elapsed));              } // end if              else              {                  e.style.cssText = originalStyle;                  if (onComplete)                  {                      onComplete(e);                  } // end if              } // end else          } // end animate()      } // end shake()      </script>  </head>  <body>      <div id="control" onclick="shake(this);">      </div>  </div>  </body>  </html>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部