vue实现小球掉落
首先,将小球儿动画代码封装成组件,创建个文件,例如qiu.js
let createBall = (left, top,box) => {// 点击事件 const {clientX,clienty} = ev createBall(clientX,clienty)const ball = document.createElement('div');ball.style.position = 'absolute';ball.style.left = left - 2+ 'px';ball.style.top = top - 5 + 'px';ball.style.width = '10px';ball.style.height = '10px';ball.style.borderRadius = '50%';ball.style.backgroundColor = 'red';ball.style.transition = 'left .6s linear, top .6s cubic-bezier(0.5,-0.5,1,1)';document.body.appendChild(ball);// 使用 requestAnimationFrame 替代 setTimeoutrequestAnimationFrame(() => {ball.style.left = box.getBoundingClientRect().left + box.offsetWidth / 2 + 'px';ball.style.top = box.getBoundingClientRect().top + 'px';});ball.ontransitionend = function () {ball.remove();};
}//传入两个参数分别为:当前点击的元素、和小球飞入到盒子的元素
const Qiu = (e, Box) => {const { clientX, clientY } = e;createBall(clientX, clientY, Box)
}export default Qiu; //导出
接下来就是引入js文件,在使用的vue文件中使用
元素部分
<template><div className='xq-all'><!-- //触发小球儿掉落按钮 --><button className='xq-btn' @click="ev=>onchufa(ev)">点击触发</button> <div className='xq-bottom'><!-- //小球掉落的位置 --><p ref="refs">小球儿</p> </div></div>
</template>
逻辑部分
<script setup>
import {ref} from 'vue'
import Qiu from './qiu.js' //引入组件
const refs=ref()const onchufa=(ev)=>{// const { clientX, clientY } = ev;Qiu(ev,refs.value) //在此时用组件中的方法}</script>
样式部分
<style lang="less" scoped>
.xq-all{.xq-btn{float: right;margin: 50px 0;}.xq-bottom{height: 45px;line-height: 45px;width: 100vw;// background-color: bisque;position: fixed;bottom: 200px;left: 200px;p{height: 40px;width: 40px;background-color: aquamarine;margin-left: 30px;font-size: 12px;position: fixed;}}
}
</style>
效果展示:
*************
相关文章:
vue实现小球掉落
首先,将小球儿动画代码封装成组件,创建个文件,例如qiu.js let createBall (left, top,box) > {// 点击事件 const {clientX,clienty} ev createBall(clientX,clienty)const ball document.createElement(div);ball.style.position a…...
k8s的存储卷、数据卷---动态PV创建
当发布PVC之后可以生成PV,还可以在动态服务器上直接生成挂载目录。PVC直接绑定和使用PV。 动态PV需要两个组件 存储卷插件:Provisioner(存储分配器)根据定义的属性创建PV StorageClass:定义属性 存储卷插件 存储卷插件:k8s本…...
go最佳实践:如何舒适地编码
什么是 "最佳 "做法? 有很多做法:你可以自己想出来,在互联网上找到,或者从其他语言中拿来,但由于其主观性,并不总是容易说哪一个比另一个好。”最佳”的含义因人而异,也取决于其背景…...
C# 消息队列、多线程、回滚、并行编程、异步编程、反射
消息队列 消息队列是一种在应用程序之间传递消息的异步通信机制。它可以使应用程序解耦并提高系统的可伸缩性和可靠性。在 C# 中,你可以使用多个消息队列技术,其中一种广泛使用的技术是 RabbitMQ。 RabbitMQ 是一个开源的消息代理,实现了高…...
汇编代码生成和编译器的后端
1.前置程序:语义分析和中间代码生成 基于SLR(1)分析的语义分析及中间代码生成程序-CSDN博客https://blog.csdn.net/lijj0304/article/details/135097554?spm1001.2014.3001.5501 2.程序目标 在前面编译器前端实现的基础上,将所生成的中间代码翻译成某…...
MySQL 8.0中新增的功能(九)
FROM_UNIXTIME()、UNIX_TIMESTAMP()和CONVERT_TZ()的64位支持 根据MySQL 8.0.28版本的更新,FROM_UNIXTIME()、UNIX_TIMESTAMP() 和 CONVERT_TZ() 函数现在在支持64位的平台上处理64位值。这包括64位版本的Linux、MacOS和Windows。在兼容的平台上,UNIX_T…...
QT基础篇(8)QT5模型视图结构
1.概述 QT5的模型视图结构主要包括模型(Model)、视图(View)和委托(Delegate)三个部分。 模型(Model):模型是数据的抽象表示,负责存储和管理数据。它可以是自…...
vue3-响应式基础之reactive
reactive() 还有另一种声明响应式状态的方式,即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性: 「点击按钮1」 <script lang"ts" setup> import { reactive } from vuec…...
【ceph】如何将osd的内容挂载出来---ceph-objectstore-tool 实现
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…...
怎样实现安全便捷的网间数据安全交换?
数据安全交换是指在数据传输过程中采取一系列措施来保护数据的完整性、机密性和可用性。网间数据安全交换,则是需要进行跨网络、跨网段甚至跨组织地进行数据交互,对于数据的传输要求会更高。 大部分企业都是通过网闸、DMZ区、VLAN、双网云桌面等方式实现…...
微信小程序定义并获取日志/实时log信息
步骤一:开通实时日志 可以在开发者工具->详情->性能质量->实时日志,点击前往,在浏览器打开we分析界面: 也可登录小程序管理后台,点击统计进入we分析: 在we分析界面找到性能质量,打开实…...
海外代理IP怎么用?常见使用问题及解决方案
海外代理IP是指提供全球范围内的代理服务器,代理服务器充当IP与目标网站之间的中介,可以起到安全匿名、提高网速、突破网络壁垒的作用。在使用代理IP的过程中,用户可能会遇到各种挑战,如连接问题、速度慢等。理解这些问题的原因并…...
DP:数位DP
数位DP的大致思想:枚举每一位能选取的合法值。 1. LC 2376 统计特殊整数 说是DP,但实际上状态转移方程挺难写的,毕竟是枚举集合论,这里就不贴状态转移方程了。总体的写法其实是搜索记忆化。之所以称之为DP,是因为&am…...
js逆向第21例:猿人学第20题新年挑战
文章目录 一、前言二、定位加密参数1、定位wasm加密2、反编译wasm3、定位sign加密三、代码实现四、参考文献一、前言 新春福利:抓取这5页的数字,计算加和并提交结果 二、定位加密参数 通过get请求地址可以看到需要搞定参数有page、sign、t如下图: 进入堆栈不难发现这样一…...
贪心+蓝桥杯
原题路径 题目思路 : 思路很简单,肯定是贪心做法,要使总代价最小,需用那些出现次数比avg多的数来替换那些没有出现或者是出现次数少于avg的数, 所以我们存当前数每次出现的代价是多少 ,枚举每一个 0 - 9 之间的数 ,如果当前数出现…...
第二篇:新建node项目并运行
🎬 江城开朗的豌豆:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》 ⛺️ 生活的理想,就是为了理想的生活 ! 安装 Node.js:首先,确保你的…...
阳光保险选择OceanBase稳定运行超700天
阳光保险集团成立于 2005 年 7 月,旗下拥有财产保险、人寿保险、信用保证保险、资产管理等多家专业子公司,是全球市场化企业中成长最快的集团公司之一,目前位列中国保险行业前八。随着数字化升级趋势的不断加速,很多企业产生将软硬…...
最强大脑闪电心算草稿1
#include<bits/stdc.h> #include<windows.h> using namespace std; int main() {double speed,n,op,sum0;int ans;srand(time(NULL));cout<<"请输入加(1)/减(2)/加减混合(3):";cin>>op;cout<<"请输入题目数量:";cin>>…...
融优学堂-艺术史
导论4 1.【单选题】根据导论的讲解,下列表述正确的是()。(1)艺术品是因人的活动而被创造出来的人工制品。(2)许多物品被制造出来时,最初的目的是满足某种实用的用途,而不…...
༺༽༾ཊ—设计-七个-07-原则-模式—ཏ༿༼༻
第七原则:迪米特职责 类与类之间的耦合度尽可能低 换言之,我们可以理解成———只与直接朋友说话,不跟陌生人说话 直接朋友: 通过方法传参传进来的朋友, 类自己的字段, 构造函数进来的也是直接朋友&…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
