js 实现点击按钮小球加入购物车动画

本文旨在实现类似点击按钮实现小球加入购物车效果。

使用技术:

  • Vue2
  • 使用 Pubsub 监听按钮点击事件(如果不想用也可以自己改造下)
  • 监听 onmousemove 来获取按钮点击时的鼠标位置

在这里插入图片描述

小球组件:

html + css:

小球父元素:定义了一些基本样式。采用 fixed 布局,让小球相对浏览器窗口进行定位;通过 opacity 控制显隐。

小球:采用任意图片。

<template><div class="ball-wrap"ref="ball":style="{opacity: ball.show,width: size + 'px',height: size + 'px',}"><i class="el-icon-document" ></i></div>
</template><style scoped>
.ball-wrap {border-radius: 50%;z-index: 9999;position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: center;background-color: #165BD3;
}
.el-icon-document {color: #fff !important;margin: 0 !important;
}
</style>

js:

props:控制小球大小、动画持续时间(不传也有默认值)

data:通过 ball.show 来控制小球的 opacity

mounted:

小球当前位置通过变量 currentMousePos 来记录,通过使用监听函数 onmousemove 修改当前鼠标位置。

小球挂载时增加监听 onmousemove,使用 debounce 防抖函数,保证 50ms 内只更新一次鼠标位置

核心方法 drop:开启小球动画

exportRecordsListNav:小球结束处的 dom 元素,直接通过 id 获取了,用 ref 还需要跨组件获取,觉得有些麻烦

主要流程:获取结束元素的位置 -> 设置小球到初始位置 -> 设置结束位置 -> 动画结束后小球隐藏、清除 transition 属性

<script>import debounce from 'lodash/debounce'// 记录小球当前位置、通过监听 onmousemove 来更新小球位置const currentMousePos = {x: 0,y: 0}export default {props: {// 球的大小size: {type: Number,default: 30},//持续时间duration: {type: Number,default: 1000},},data() {return {ball: {show: 0,},};},mounted() {// 初始化小球,控制小球显隐this.initBall()// 小球挂载时监听 onmousemove,使用 debounce 保证 50ms 内只更新一次小球位置window.addEventListener('mousemove', debounce((e) => {currentMousePos.x = e.clientXcurrentMousePos.y = e.clientY}, 50))},methods: {initBall(){this.ball.show = 0},// 外部调用方法,开始执行动画drop(){// 获取结束位置的元素及坐标const exportRecordsListNav = document.getElementById('export-records-list')const endPos = {}endPos.x = exportRecordsListNav.getBoundingClientRect().leftendPos.y = exportRecordsListNav.getBoundingClientRect().top// 小球显示this.ball.show = 1// 设置小球初始位置this.$refs.ball.style.transform = `translate(${currentMousePos.x}px, ${currentMousePos.y}px)`// 延时是为了防止合并移动setTimeout(() => {// 增加动画效果this.$refs.ball.style.transition = `transform ${this.duration}ms ease-in-out`// 设置小球结束位置this.$refs.ball.style.transform = `translate(${endPos.x}px, ${endPos.y}px)`// 动画结束后,小球隐藏,清除动画效果// 清除动画效果是为了下次小球从 (0,0) 移动到初始位置时不需要有动画setTimeout(()=>{this.ball.show = 0this.$refs.ball.style.transition = 'unset'}, this.duration)}, 100)},}}</script>

使用方式:

我将结束元素和小球封装成了一个组件,原因是认为工作项目中小球动画只和该导航栏相关。

由于加入购物车的按钮会在很多不同的单页面 page 里,因此使用 Pubsub 技术告诉结束元素此刻点击了按钮,再由结束元素组件调用 drop 方法,这样在其他页面只需进行发布订阅,不需要关注其他操作。

结束元素组件:
<template><div><span id="export-records-list">购物车</span><MovableBall ref="movableBallRef"/></div>
</template><script>
import MovableBall from '@/components/movable-ball/index.vue' 
import Pubsub from 'pubsub-js'
export default {data () {},components: {MovableBall,},mounted () {// 订阅消息、接受到消息后执行 moveBall 方法Pubsub.subscribe('add-to-card', this.moveBall)},methods: {moveBall() {if(this.$refs.movableBallRef) {// 开启小球动画this.$refs.movableBallRef.drop()}},},
}
</script>
点击「加入购物车按钮」的单页面:
<script>
import Pubsub from 'pubsub-js'
export default {methods: {// 点击按钮加入购物车addToCard() {// 发布消息Pubsub.publish('add-to-card')                        }}
}
</script>

参考文档:
仿加入购物车飞入动画效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习 | 使用CatBoost处理缺失值

数据是任何分析或机器学习的基础。然而&#xff0c;现实世界的数据集并不完美&#xff0c;它们经常包含缺失值&#xff0c;这可能导致任何算法的训练阶段出现错误。处理缺失值至关重要&#xff0c;因为它们可能会导致数据分析和机器学习模型中出现偏差或不准确的结果。处理缺失…

每日五道java面试题之springMVC篇(一)

目录&#xff1a; 第一题. 什么是Spring MVC&#xff1f;简单介绍下你对Spring MVC的理解&#xff1f;第二题. Spring MVC的优点第三题. Spring MVC的主要组件&#xff1f;第四题. 什么是DispatcherServlet?第五题. 什么是Spring MVC框架的控制器&#xff1f; 第一题. 什么是S…

子查询与连表查询

子查询与连表查询 标签:数据库 子查询 mysql> explain select e.empno,e.ename,(select dname from dept d where e.deptno d.deptno) as dname from emp e where e.deptno 1; -------------------------------------------------------------------------------------…

Manz高压清洗机S11-028GCH-High Quality Cleaner 操作使用说明492页

Manz高压清洗机S11-028GCH-High Quality Cleaner 操作使用说明492页

智能部署之巅:Amazon SageMaker 引领机器学习革新

本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 &#xff08;全球 TMT 2023年12月6日讯&#xff09;亚马逊云科技在 2023 re:Invent 全…

2024 GoLand激活,分享几个GoLand激活的方案

文章目录 GoLand公司简介我这边使用GoLand的理由GoLand 最新变化GoLand 2023.3 最新变化AI Assistant 正式版GoLand 中的 AI Assistant&#xff1a;_Rename_&#xff08;重命名&#xff09;GoLand 中的 AI Assistant&#xff1a;_Write documentation_&#xff08;编写文档&…

Linux编程3.5 进程-进程创建

1、相关函数 #include<unistd.h> #include<sys/types.h> pid_t fork(void); 返回&#xff1a;子进程中为0&#xff0c;父进程中为子进程ID&#xff0c;出错为-1pid_t vfork(void); 返回&#xff1a;子进程中为0&#xff0c;父进程中为子进程ID&#xff0c;出…

Unity零基础到进阶 | Unity中 屏蔽指定UI点击事件 的多种方法整理

Unity零基础到进阶 | Unity中 屏蔽指定UI点击事件 的多种方法整理一、Unity中 屏蔽透明区域的点击事件1.1 使用Image组件自带的参数检测1.2 根据点击的坐标计算该点的像素值是否满足阈值 二、Unity中屏蔽 不规则图片按钮点击的事件 总结 &#x1f3ac; 博客主页&#xff1a;htt…

遗传算法优化BP神经网络时间序列回归分析,ga-bp回归分析

目录 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数, BP神经网络的传递函数 遗传算法原理 遗传算法主要参数 遗传算法流程图 完整代码包含数据下载链接: 遗传算法优化BP神经网络时间序列回归分析,ga-bp回归分析(代码完…

Qt 类的前置声明和头文件包含

1. 在头文件中引入另一个类经常有两种写法 1&#xff09;前置声明 2&#xff09;头文件包含 #ifndef FRMCOUPLE2_H #define FRMCOUPLE2_H#include <QWidget> //头文件包含namespace Ui { class frmcouple2; }//前置声明&#xff1a;QPushButton frmchkeyboard…

moi3D安装

下载文件双击文件 下一步 同意下一步 下一步 下一步 下一步 安装下一步 完成 破解 将如图中的文件复制到文件目录下 汉化 在目录中进入ui文件夹下 在安装包中找到如下的文件复制到ui目录下 在打开 另存为 另存为时改一下编码格式如图 打开软件 找到如图options进入…

图像分类技术在城市垃圾分类与处理中的应用与实践

一、引言 在当今世界&#xff0c;城市化进程不断加快&#xff0c;随之而来的是日益增长的垃圾处理压力。城市生活垃圾、工业固体废物和危险废物的处理已经成为环境保护领域的一大挑战。为了应对这一挑战&#xff0c;卫生填埋、垃圾堆肥和垃圾焚烧等技术路线应运而生。其中&…

Cloud-Eureka服务治理-Ribbon负载均衡

构建Cloud父工程 父工程只做依赖版本管理 不引入依赖 pom.xml <packaging>pom</packaging><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.9.RELEA…

【系统学习】2-Java进阶知识总结-3-集合-1-补充【泛型、树、数据结构】

文章目录 泛型什么是泛型&#xff1f;常见的泛型标识符泛型类泛型方法泛型接口通配符 树树的基本概念什么是二叉树&#xff1f;二叉树--普通二叉树二叉树--二叉查找树定义规则优缺点 二叉树--平衡二叉树定义规则旋转机制 二叉树--红黑树定义规则红黑规则 常见数据结构总体特点结…

【自然语言处理】NLP入门(五):1、正则表达式与Python中的实现(5):字符串常用方法:对齐方式、大小写转换详解

文章目录 一、前言二、正则表达式与Python中的实现1.字符串构造2. 字符串截取3. 字符串格式化输出4.字符转义符5. 字符串常用函数函数与方法之比较 6. 字符串常用方法1. 对齐方式center()ljust()rjust() 2. 大小写转换lower()upper()capitalize()title()swapcase() 一、前言 本…

在Jetson Xavier NX 开发板上使用VScode执行ROS程序详细过程

1.创建 ROS 工作空间ws 在home下打开终端输入下面指令 mkdir -p xxx_ws/src(必须得有 src) cd 自己命名_ws catkin_make2.启动 vscode cd 自己命名_ws code .3.vscode 中编译 ros 快捷键 ctrl shift B 调用编译&#xff0c;在上方弹窗位置选择:catkin_make:build 可以点击…

jenkins配置

jenkins前端常用插件&#xff1a; Git Parameter 、Maven Integration 、Proxmox&#xff08;snapshot&#xff09;、Pipeline: Multibranch&#xff08;多分支流水线&#xff09;、Pipeline: Stage Step、pipeline Git plugin、NodeJS Plugin、Publish Over SSH、SSH server…

python界面开发 - Menu (popupmenu) 右键菜单

文章目录 1. python图形界面开发1.1. Python图形界面开发——Tkinter1.2. Python图形界面开发——PyQt1.3. Python图形界面开发——wxPython1.4. Python图形界面开发—— PyGTK&#xff1a;基于GTK1.5. Python图形界面开发—— Kivy1.6. Python图形界面开发——可视化工具1.7. …

【个人学习笔记】概率论与数理统计知识梳理【六】

文章目录 第六章 样本及抽样分布一、随机抽样二、直方图与箱线图2.1 直方图2.2 箱线图 三、抽样分布总结 第六章 样本及抽样分布 好久没更新了&#xff0c;重新捡起来把它更完吧&#xff0c;可能会再开一个机器学习的笔记系列&#xff0c;参考用书是周志华的西瓜书。前五章主要…

Android 14.0 首次开机默认授予app运行时权限(去掉运行时授权弹窗)

1.概述 在14.0的系统rom产品定制化开发中&#xff0c;在6.0以后对于权限的申请&#xff0c;都需要动态申请&#xff0c;所以会在系统首次启动后&#xff0c;在app的首次运行时&#xff0c; 会弹出授权窗口&#xff0c;会让用户手动授予app运行时权限&#xff0c;在由于系统产品…