购物车水平抛物线动画

最新推荐文章于 2024-03-08 14:37:35 发布

yaoyyl

最新推荐文章于 2024-03-08 14:37:35 发布

阅读量551

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yaoyyl/article/details/79415029

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta content="telephone=no" name="format-detection" />
    <title>CSS3 水平抛物线动画</title>
    <script>
      ! function(n) {
        var e = n.document,
          t = e.documentElement,
          i = 750,
          d = i / 100,
          o = "orientationchange" in n ? "orientationchange" : "resize",
          a = function() {
            var n = t.clientWidth || 320;
            n > 750 && (n = 750), t.style.fontSize = n / d + "px"
          };
        e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
      }(window);
    </script>
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
      }
      .main{

      }
      .product{

      }
      .product ul li{
        font-size: 0.3rem;
        position: relative;
        height: 1rem;
      }
      .product ul li:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #eeeeee;
      }
      .product ul li .buy{
        position: absolute;
        top: 0.23rem;
        right: 0.3rem;
        font-size: 0.3rem;
        border: 1px solid #ed2e40;
        color: #ed2e40;
        border-radius: 0.1rem;
        padding: 0 0.1rem;
        height: 0.5rem;
        line-height: 0.5rem;
      }
      .buyCar{
        position: fixed;
        bottom: 0.5rem;
        left: 0.5rem;
        font-size: 0.2rem;
        width: 0.8rem;
        text-align: center;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 50%;
        background-color: #ed2e40;
        color: #fff;
        z-index: 3;
      }
      #ball {
        width:12px;
        height:12px;
        background: #5EA345;
        border-radius: 50%;
        position: fixed;
        z-index: 2;
        bottom: 0.6rem;
        left: 0.6rem;
      }
    </style>
  </head>
  <body>
  <div class="main">
    <div class="product">
      <ul id="ul">
        <li><div class="con"></div><span class="buy" οnclick="buy()">购买</span></li>
      </ul>
    </div>
    <div class="buyCar">购物车</div>
    <!--<div id="ball"></div>-->
  </div>
  <script>
      //生成HTML标签
      document.getElementById('ul').innerHTML='';
      for(var i=0;i<15;i++){
          var newLi = document.createElement("li");
          newLi.innerHTML = '<li><div class="con">'+(i+1)+'</div><span class="buy" οnclick="buy(this)">购买</span></li>';
          document.getElementById('ul').appendChild(newLi)
      }
      //生成水平抛物线动画 var ball=parabolic();   ball(e); //传入点击标签
      function parabolic() {
          return function (e) {
              //生成动画标签
              var ball = document.createElement("div");
              ball.id = 'ball';
              document.body.appendChild(ball);

              var rect = e.getBoundingClientRect(); //getBoundingClientRect获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
              ball.style.top = (rect.top+rect.height/2)+'px';
              ball.style.left = rect.left+'px';
              ball.style.transition = 'left 0s, top 0s';
              //获取购物车标签
              var buyCar=document.getElementsByClassName('buyCar')[0].getBoundingClientRect();
              setTimeout(()=>{
                  ball.style.top = window.innerHeight-(window.innerHeight-buyCar.top-buyCar.height/2)+'px';
                  ball.style.left = (buyCar.left+buyCar.height/2)+'px';
                  ball.style.transition = 'left 1s linear, top 1s ease-in';
              }, 20)
              //动画结束后自动删除
              setTimeout(function () {
                  document.body.removeChild(ball);
              },1050)
          }
      }
      //
      function buy(e) {
          var ball=parabolic();
          ball(e);
      }
  </script>
  </body>
</html>