首页 > 其他分享 >添加购物车动画

添加购物车动画

时间:2023-03-19 14:33:34浏览次数:44  
标签:动画 style top 购物车 current 添加 element biu

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_3962024_7b50c2a5js9.css"
    />
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      .biu {
        position: fixed;
      }
      .bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: #eeeeee solid 1px;
        display: flex;
        align-self: center;
        padding: 10px;
        z-index: 2;
      }
      .icon-gouwuchekong {
        font-size: 20px;
        position: relative;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>商品1 <button>加入购物车</button></li>
      <li>商品2 <button>加入购物车</button></li>
    </ul>

    <div class="bar">
      <i class="iconfont icon-gouwuchekong"></i>
    </div>
    <script>
      // 获取元素的绝对位置坐标(像对于页面左上角)
      function getElementPagePosition(element) {
        //计算x坐标
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;
        while (current !== null) {
          actualLeft += current.offsetLeft;
          current = current.offsetParent;
        }
        //计算y坐标
        var actualTop = element.offsetTop;
        var current = element.offsetParent;
        while (current !== null) {
          actualTop += current.offsetTop + current.clientTop;
          current = current.offsetParent;
        }
        //返回结果
        return { x: actualLeft, y: actualTop };
      }

      
      document.body.addEventListener("click", (e) => {
        if (e.target.nodeName === "BUTTON") {
          // 创建biu元素
          const biu = document.createElement("div");
          biu.className = "biu";
          biu.style.left = e.pageX + "px";
          biu.style.top = e.pageY + "px";
          biu.style.transform = "scale(1)";
          biu.appendChild(e.target.parentNode.cloneNode(true));
          document.body.appendChild(biu);

          // 计算购物车的位置
          const carEl = document.querySelector(".icon-gouwuchekong");
          const carElPostion = getElementPagePosition(carEl);
          const needLeft = (carElPostion.x - parseInt(window.getComputedStyle(biu).width)/2)

          // 将biu元素抛到购物车里
          biu.style.transition = "left 0s, top 0s, transform 0s";
          setTimeout(() => {
            biu.style.top =  carElPostion.y + "px";
            biu.style.left = Number(needLeft) + "px";
            biu.style.transform = "scale(0)";
            biu.style.transition =
              "left 1s linear, top 1s ease-in, transform 1.2s linear";
            setTimeout(() => {
                biu.remove();
            }, 1000);
          }, 20);
         
        }
      });
    </script>
  </body>
</html>

标签:动画,style,top,购物车,current,添加,element,biu
From: https://www.cnblogs.com/dingshaohua/p/17233017.html

相关文章

  • uni-app:uni-transition动画分多个step执行()
    一,官方文档地址:https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html二,js代码:<template><view><viewclass="navBarBox"style="posit......
  • unity 在toolbar处添加按钮
      usingSystem;usingSystem.Reflection;usingUnityEngine;usingUnityEditor;usingUnityEngine.UIElements;[InitializeOnLoad]publicstaticclassCruT......
  • 【Android开发】动画范例2-旋转、平移、缩放和透明度渐变的补间动画
    实现旋转、平移、缩放和透明度渐变的补间动画,具体实现如下:1.在新建项目的res目录中,创建一个名为anim的目录,并在该目录中创建实现旋转、平移、缩放和......
  • 面向对象:添加删除和修改学生信息
    packagecom.itheima.test7;publicclassTest{publicstaticvoidmain(String[]args){//定义一个长度为三的数组Student[]arr=newStude......
  • 将VSCode添加到鼠标右键菜单
    第一步:在桌面新建一个以.reg为后缀的注册表文件;文件名称随便例如 1.reg第二步:右击此文件用记事本打开,或者用其他编辑器打开都开启第三步:复制下面的代码粘贴到新建的......
  • elasticsearch添加拼音分词搜索
    分词器是es当中的一个组件,通俗来讲,就是将搜索的条件按照语义进行拆分,分词为多个词语,es会讲text格式的字段按照分词器的结果进行分词,并编排成倒排索引,正因为如此,es的查询速......
  • 线程池中阻塞队列的作用?为什么是先添加列队而不是先创建最大线程?
    线程池中阻塞队列的作用:1.⼀般的队列只能保证作为⼀个有限⻓度的缓冲区,如果超出了缓冲⻓度,就⽆法保留当前的任务了,阻塞队列通过阻塞可以保留住当前想要继续⼊队的任务。2.......
  • storybook添加全局样式与sass全局变量设置
    storybook组件需要全局样式,只需在.storybook/preview.js增加全局样式即可。import '../src/style/index.scss';export const parameters = {  actions: { arg......
  • fiddler添加时间IP等栏目
    打开Fiddler,点击“Rules”=》“CustomizeRules…”,在弹出的编辑窗口找到ClassHandlers,然后添加下面的这些代码就可以了classHandlers{//显示每行请求的发起时间:时......
  • fastadmin 工具栏添加按扭
    fastadmin工具栏添加按扭(例:批量添加)bilichen006于2023-02-0220:12:50发布231收藏分类专栏:工具小例子文章标签:javascript前端javaphpPoweredby金山文档版......