当前位置: 首页 > news >正文

CSS+JQuery 实现弹力球效果,碰到屏幕边框弹回

实现弹力球效果,碰到屏幕边框弹回,效果如下

代码如下:

<img src="../image/ball.png" alt="" class="ball">
<style>.ball {position: fixed;top: 50vh;left: 50vw;width: 15vw;height: 15vw;border-radius: 50%;z-index: 0;}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>const ball = document.querySelector('.ball');let posX = window.innerWidth / 2;let posY = window.innerHeight / 2;let velX = 2;let velY = 2;const friction = 0.5;let rotation = 0;const rotationSpeed = 3;function moveBall() {posX += velX;posY += velY;// Bounce off the edgesif (posX <= 0 || posX + ball.offsetWidth >= window.innerWidth) {velX = -velX * friction;posX = Math.min(Math.max(posX, 0), window.innerWidth - ball.offsetWidth);}if (posY <= 0 || posY + ball.offsetHeight >= window.innerHeight) {velY = -velY * friction;posY = Math.min(Math.max(posY, 0), window.innerHeight - ball.offsetHeight);}rotation += rotationSpeed;ball.style.left = posX + 'px';ball.style.top = posY + 'px';ball.style.transform = 'rotate(' + rotation + 'deg)';requestAnimationFrame(moveBall);}moveBall();
</script>

相关文章:

CSS+JQuery 实现弹力球效果,碰到屏幕边框弹回

实现弹力球效果&#xff0c;碰到屏幕边框弹回&#xff0c;效果如下 代码如下&#xff1a; <img src"../image/ball.png" alt"" class"ball"> <style>.ball {position: fixed;top: 50vh;left: 50vw;width: 15vw;height: 15vw;border…...

shell编程规范和脚本变量

什么是shell 人和计算机内核之间的中介&#xff1a; 计算机的语言是二进制&#xff0c;把人类的语言翻译成计算机能够识别的语言&#xff0c;然后让内核来处理 内核完成之后要把结果反馈给用户&#xff0c;要把计算机的翻译成人类能够识别的语言 命令解释器&#xff0c;pyc…...

jspm美容院管理系统

摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计…...

Prometheus结合K8s(二)使用

上一篇介绍了如何搭建 Prometheus结合K8s&#xff08;一&#xff09;搭建-CSDN博客&#xff0c;这章介绍使用 页面访问 kubectl get svc -n prom 看promeheus和granfana的端口访问页面 Prometheus 点击status—target&#xff0c;可以看到metrics的数据来源&#xff0c;即各…...

【虚幻引擎】UE5数字人开发实战教程

本套课程将会交大家如何去开发属于自己的数字人&#xff0c;包含大模型接入&#xff0c;流式输出&#xff0c;语音识别&#xff0c;语音合成&#xff0c;口型驱动&#xff0c;动画蓝图&#xff0c;语音唤醒等功能。 课程介绍视频如下&#xff1a; 【虚幻引擎】UE5 历时一个多月…...

深入分析:固定参考框架在RViz中的作用与对数据可视化的影响 ros ubuntu20.04

深入分析&#xff1a;固定参考框架在RViz中的作用与对数据可视化的影响 RViz (Robot Visualization) 是 ROS (Robot Operating System) 中一种重要的三维可视化工具&#xff0c;主要用于实时观察和分析传感器数据、机器人状态信息以及环境模型。RViz的核心功能之一是固定参考框…...

Android:时间选择器(最下面有效果图)

1.创建DateUtil类 /*** Created by wangshuai on 2024/11/19.*/ public class DateUtil {public final static String PATTERN_ALL"yyyy-MM-dd HH:mm:ss";public final static String PATTERN_DEFAULT"yyyy-MM-dd";/*** 获取当前时间* return yyyy-MM-dd*…...

第十六届蓝桥杯模拟赛(第一期)-c++/c

c/c蓝桥杯模拟赛题解&#xff0c;非常详细 质因数 1、填空题 【问题描述】 如果一个数 p 是个质数&#xff0c;同时又是整数 a 的约数&#xff0c;则 p 称为 a 的一个质因数。 请问 2024 有多少个质因数。 【答案提交】 这是一道结果填空的题&#xff0c;你只需要算出结果后提…...

如何挑选路由器?需要看哪些参数?

挑选路由器时&#xff0c;选择合适的型号和参数对于确保家庭或办公网络的速度、稳定性和覆盖范围至关重要。以下是挑选路由器时需要考虑的关键参数和因素&#xff1a; 1. 无线标准 (Wi-Fi标准) 无线标准是衡量路由器性能的核心指标。不同的无线标准提供不同的速率、范围和技术…...

mysql-备份(二)

前章介绍了MySQL的内部数据结构btree&#xff0c;这章讲述mysql的备份 1&#xff1a;环境 ubuntu22.04 LST mysql5.7.42 or win10 mysql5.7.44 (这里图简单直接windows部署) download:https://downloads.mysql.com/archives/community/ 2:install 1> unzip mysql-5.7.44-w…...

Tailwind CSS 和 UnoCSS简单比较

UnoCSS 和 Tailwind CSS 都是流行的原子化 CSS 框架&#xff0c;但它们在设计理念、性能和使用方式上有一些重要的区别。下面是对它们的详细对比&#xff1a; 1. 概述 Tailwind CSS&#xff1a;Tailwind 是一个原子化的 CSS 框架&#xff0c;提供了大量的预定义类&#xff08;…...

unity3d————范围检测

目录 知识点一&#xff1a;什么是范围检测 知识点二&#xff1a;如何进行范围检测 问题&#xff1a; Physics.queriesHitTriggers 怎么查看是不是true&#xff1f; QueryTriggerInteraction.UseGlobal 参数意味着是否检测触发器将依据全局设置 Physics.queriesHitTrigge…...

修改this.$confirm的按钮位置、图标、文字及标题

在Vue.js项目中&#xff0c;this.$confirm 通常是基于某些UI库&#xff08;如Element UI或Ant Design Vue&#xff09;的对话框确认方法。 以下是基于Element UI的this.$confirm的用法示例。 在此之前&#xff0c;你的项目要已经安装了Element UI&#xff0c;如果没安装话就打…...

SQL MID() 函数详解

SQL MID() 函数详解 SQL 中的 MID() 函数是一个非常有用的字符串处理工具&#xff0c;它允许用户从字符串中提取特定位置的子字符串。这个函数在数据库查询和报告中特别有用&#xff0c;尤其是在需要从较长的文本字段中提取特定信息时。本文将详细介绍 MID() 函数的用法、参数…...

【蓝桥杯备赛】123(前缀和的复杂应用)

5. 前缀和的复杂应用 5.1. 123&#xff08;4 星&#xff09; 5.1.1. 题目解析 这道题仍然是求一段区间的和&#xff0c;很容易能够想到前缀和找规律&#xff1a; 1------------------1 号块 1 2----------------2 号块 1 2 3--------------3 号块 1 2 3 4------------4 号…...

MINES

MINES (m)6A (I)dentification Using (N)anopor(E) (S)equencing Tombo(v1.4) 命令在 MINES 之前执行&#xff1a; &#xff08;仅在 fast5 文件中尚未包含 fastq 时需要&#xff09; tombo preprocess annotate_raw_with_fastqs --fast5-basedir /fast5_dir/ --fastq-file…...

H.265流媒体播放器EasyPlayer.js H5流媒体播放器关于如何查看手机端的日志信息并保存下来

现今流媒体播放器的发展趋势将更加多元化和个性化。人工智能的应用将深入内容创作、用户体验优化等多个方面&#xff0c;带来前所未有的个性化体验。 EasyPlayer.js H.265流媒体播放器属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#…...

uni-app快速入门(十一)--常用JS API(上)

在前面学习了uni-app的布局、组件、路由等知识点以后&#xff0c;还要掌握uni-app的JS API ,也可以理解为基于uni-app的java script。本节介绍uni-app的request请求、文件上传、数据缓存、获取位置、获取系统信息、获取手机的网络状态、拨打电话API。 一、request请求 使用uni…...

Flink任务提交到yarn上slot数量为0的问题

现象&#xff1a;Flink提交到yarn上slot数量为0的问题 解决方法&#xff1a; 参考论坛上的方案&#xff0c;修改flink-conf.yaml文件都不管用 最终解决方法&#xff1a; $FLINK_HOME/lib 路径下有2个非.jar结尾的文件&#xff0c;把这几个文件移走之后&#xff0c;再启就可…...

vue3怎么根据字符串获取组件实例

例子&#xff1a; 我在使用vue2开发的时候&#xff0c;定义了一个方法 handler(strRef){ this.$refs[strRef].innerText hello world }&#xff0c; 我在点击某个按钮的时候&#xff0c;调用了方法handler&#xff0c;传递了一个参数是字符串 condition&#xff0c;然后方法…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...

【字节拥抱开源】字节团队开源视频模型 ContentV: 有限算力下的视频生成模型高效训练

本项目提出了ContentV框架&#xff0c;通过三项关键创新高效加速基于DiT的视频生成模型训练&#xff1a; 极简架构设计&#xff0c;最大化复用预训练图像生成模型进行视频合成系统化的多阶段训练策略&#xff0c;利用流匹配技术提升效率经济高效的人类反馈强化学习框架&#x…...

数据可视化交互

目录 【实验目的】 【实验原理】 【实验环境】 【实验步骤】 一、安装 pyecharts 二、下载数据 三、实验任务 实验 1&#xff1a;AQI 横向对比条形图 代码说明&#xff1a; 运行结果&#xff1a; 实验 2&#xff1a;AQI 等级分布饼图 实验 3&#xff1a;多城市 AQI…...