vue实现小球掉落

news/2024/2/29 15:25:38/文章来源:https://blog.csdn.net/m0_74060440/article/details/135559927

首先,将小球儿动画代码封装成组件,创建个文件,例如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>

效果展示:

*************

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

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

相关文章

使用composer生成的DMG和PKG格式软件包有何区别

在使用Composer从包源构建软件包时候&#xff0c;有两种不同类型的包&#xff1a;PKG和DMG。你知道两者之间的区别吗? 以及如何选取吗&#xff1f; 每种格式都有各自的优势具体取决于软件包的预期用途以及用于部署软件包的工具。下面我们来了解一下PKG和DMG格式的区别和用途。…

科研绘图(八)线性热图

线性热图&#xff08;Linear Heat Map&#xff09;是一种数据可视化技术&#xff0c;用于展示数值在一维线性空间上的分布情况。它通常用于展示沿着一条线&#xff08;例如时间线或任何一维序列&#xff09;的数据密度或强度变化。线性热图与传统的二维热图不同&#xff0c;后者…

InternLM第5次课笔记

LMDeploy 大模型量化部署实践 1 大模型部署背景 2 LMDeploy简介 3 动手实践环节 https://github.com/InternLM/tutorial/blob/main/lmdeploy/lmdeploy.md 3

Spring Security-查询数据库认证

查询数据库认证权限(未自定义页面) 整合mybatis-plus 完成数据库操作 1.引入相关依赖 再父工程中 增加 mybatis-plus lombok mysql 相关依赖及版本号 <dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</grou…

AIGC ChatGPT 4 Prompt 万能提示词公式

最近大家都在使用ChatGPT来帮助自己完成相应的工作。很多时候大家提出的问题得不到很清晰,很明确的答案。 我们应该怎么样来和ChatGPT进行有效的沟通呢? 例如我们先来问一问ChatGPT: 要获得最准确的回复,请确保遵循以下建议: 明确性:请尽量明确描述您的问题。确保提供足…

AI大模型预先学习笔记一:transformer和fine tune技术介绍

一、商业观点&#xff1a;企业借助大模型获得业务增长可能 二、底层原理&#xff1a;transformer 1&#xff09;备注 ①下面每个步骤都是自回归的过程&#xff08;aotu-regressive&#xff09;&#xff1a;已输出内容的每个字作为输入&#xff0c;一起生成下一个字 ②合起来就…

Android中的SPI实现

Android中的SPI实现 SPI是JVM世界中的标准API&#xff0c;但在Android应用程序中并不常用。然而&#xff0c;它可以非常有用地实现插件架构。让我们探讨一下如何在Android中利用SPI。 问题 在Android中&#xff0c;不同的提供者为推送功能提供服务&#xff0c;而在大型项目中…

使用micro-app将现有项目改造成微前端,对现有项目实现增量升级

使用micro-app将现有项目改造成微前端&#xff0c;对现有项目实现增量升级 基座应用 1、安装依赖 npm i micro-zoe/micro-app --save2、在入口引入 //main.js import microApp from micro-zoe/micro-appnew Vue({ }) //在new Vue 下面执行 microApp.start()3、新增一个vue页…

Nacos和Eureka比较、统一配置管理、Nacos热更新、多环境配置共享、Nacos集群搭建步骤

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Nacos和eureka的对比二、统一配置管理二、Nacos热更新方式一方式二 三、多环境配置共享四、Nacos集群搭建步骤&#xff08;黑马springCloud的p29&#xff0…

SpringCloud 源码系列之全局 Fegin 日志收集(okHttpClient、httpClient)

SpringCloud 源码系列之全局 Fegin 日志收集&#xff08;okHttpClient、httpClient&#xff09;目录 HttpClient 全局日志收集思路切换成HttpClient验证配置效果HttpClient 全局日志收集源码分析看源码顺带产物okHttpClient 全局日志收集总结 接上文SpringCloud OpenFegin 底层…

Python爬虫---scrapy shell 调试

Scrapy shell是Scrapy提供的一个交互式shell工具&#xff0c;它可以帮助我们进行爬虫的开发和调试。可以使用它来测试xpath或css表达式&#xff0c;查看它们是如何工作的&#xff0c;以及它们从你试图抓取的网页中提取的数据。它允许你在编写spider时交互地测试表达式&#xff…

【QT】自定义对话框及其调用

目录 1 对话框的不同调用方式 2 对话框QWDialogSize的创建和使用 3 对话框QWDialogHeaders的创建和使用 4 对话框QWDialogLocate的创建与使用 5 利用信号与槽实现交互操作 1 对话框的不同调用方式 在一个应用程序设计中&#xff0c;为了实现一些特定的功能&#xff0c;必须设计…

UI设计中插画赏析和产品色彩分析

插画赏析&#xff1a; 1. 插画是设计的原创性和艺术性的基础 无论是印刷品、品牌设计还是UI界面&#xff0c;更加风格化的插画能够将不同的风格和创意加入其中&#xff0c;在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。 2. 插画是视觉触发器&#xff0c;瞬间传达大量…

13 | 使用代理ip爬取安居客房源信息

这是一个简单的Python爬虫代码,用于从安居客网站爬取房地产信息。该爬虫使用了代理IP来绕过可能的封禁,并提供了一些基本的信息抽取功能。 如果访问过多,那么可能出现了验证码 对此,最好的方法就是换ip。 使用代理IP的主要目的是保护爬虫的稳定性和隐私。以下是一些常见的原…

8.临床预测模型验证——交叉验证/Bootstrap法

基本概念 交叉验证&#xff1a; 将一定比例的数据挑选出来作为训练集&#xff0c;将其余未选中的样本作为测试集&#xff0c;先在训练集中构建模型&#xff0c;再在测试集中做预测。 内部验证&#xff1a;手动将样本随机分为训练集和测试集&#xff0c;先在训练集中构建模型…

世邦通信 SPON IP网络对讲广播系统getzoneterminaldata.php 未授权访问

产品介绍 世邦通信SPON IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 漏洞描述 spon IP网络对讲广播系统getuserdata.php存在未授权访问漏洞&#xff0c;攻击者可通过该漏洞获取后台敏感数据。 资…

解决kali beef启动失败解问题

只限于出现这个提示的时候使用 卸载 ruby apt remove ruby 卸载 beef apt remove beef-xss 重新安装ruby apt-get install ruby apt-get install ruby-dev libpcap-dev gem install eventmachine 重新安装beef apt-get install beef-xss 弄完以上步骤如果还是不行就重启kali再试…

现代雷达车载应用——第3章 MIMO雷达技术 3.4节 自动驾驶使用的高分辨成像雷达

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 3.4 自动驾驶使用的高分辨成像雷达 如今&#xff0c;许多专为ADAS功能设计的汽车雷达收发器&#xff0c;如NXP半导体的MR3003和德州仪器的AWR2243&…

力扣hot100 打家劫舍 DP 滚动数组

Problem: 198. 打家劫舍 文章目录 思路复杂度&#x1f496; Code&#x1f496; DP空间优化版 思路 &#x1f468;‍&#x1f3eb; 参考地址 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) &#x1f496; Code class Solution {public static …

七、Qt 信号和槽

在QT4以上的版本&#xff0c;在窗体上用可以通过选中控件&#xff0c;然后点击鼠标右键单击按钮&#xff0c;选择“转到槽”。可以自动创建信号和槽。 选择clicked(),并点击 ok Qt Creator会给头文件和代码文件自动添加 这个按钮的单击事件&#xff08;信号和槽&#xff09;。 …