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

【原生js案例】webApp实现鼠标移入移出相册放大缩小动画

news 来源：原创 2025/7/16 15:13:55

图片相册这种动画效果也很常见，在我们的网站上。鼠标滑入放大图片，滑出就恢复原来的大小。现在我们使用运动定时器来实现这种滑动效果。

感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解，该系列还在不断更新中。

实现效果请添加图片描述

代码展示

  • 页面基础结构
 <h2>鼠标移入移出图片缩小放大效果</h2><ul id="ul1"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
  • 页面UI美化
*{padding: 0;margin: 0;}#ul1{list-style: none;width: 330px;margin: 60px auto;}#ul1 li{float: left;width: 100px;height: 100px;background-color: red;margin: 10px 0 0 10px;cursor: pointer;}h2{text-align: center;margin-top: 50px;}
  • 核心逻辑脚本
    在js中，进行样式的优化与背景图片的设置，根据图片的命名习惯，我们可以很方便的进行背景图设置。
// 元素居中方法window.onload = function(){const oUl = document.getElementById('ul1');const aLi = oUl.getElementsByTagName('li');oUl.style.position = 'relative';const arr = []let zIndex= 1// 在用js去设置css属性的时候，在同一代码块中，有些样式的优先级很高的// aLi[i].style.position = 'absolute';虽然写在后面，但是会提前解析生效for(let i=0;i<aLi.length;i++){aLi[i].style.left = aLi[i].offsetLeft + 'px';aLi[i].style.top = aLi[i].offsetTop + 'px';aLi[i].style.background = `url(./images/${i+1}.png) no-repeat center`;aLi[i].style.backgroundSize = '100% 100%';arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});}for(let i=0;i<aLi.length;i++){aLi[i].style.position = 'absolute';aLi[i].style.margin = '0';aLi[i].index = i;// 添加移入移除事件aLi[i].onmouseover = function(){this.style.zIndex = zIndex++move(this,{width:200,height:200,left:arr[this.index].left-50,top:arr[this.index].top-50}); }aLi[i].onmouseout = function(){move(this,{width:100,height:100,left:arr[this.index].left,top:arr[this.index].top}); }}}

总结

  • 在每个li上面添加事件的时候，一定要注意索引index的正确获取
  • 每个li的初始left和top必须预先存起来，不能使用当前的最新left和top

相关文章：

【原生js案例】webApp实现鼠标移入移出相册放大缩小动画

图片相册这种动画效果也很常见&#xff0c;在我们的网站上。鼠标滑入放大图片&#xff0c;滑出就恢复原来的大小。现在我们使用运动定时器来实现这种滑动效果。 感兴趣的可以关注下我的系列课程【webApp之h5端实战】&#xff0c;里面有大量的css3动画效果制作原生知识分析&…...

编程日记 2025/7/16 15:13:55

杂谈随笔-关于unity开发游戏

最近有在做unity的游戏开发&#xff0c;都是自学&#xff0c;甚至没有完整的课程体系…… 在犹豫要不要出系列教程&#xff0c;帮助新手快速入门的同时算是巩固一下基础知识。 那这篇文章先谈谈我对于引擎开发游戏的一些小观点&#xff0c;算是做了这么十几个星期的微不足道的…...

编程日记 2025/7/16 14:58:50

base64转file文件对象

1.base64转file文件对象 //将base64转换为文件 dataURLtoFile(dataurl, filename) { var arr dataurl.split(,),mime arr[0].match(/:(.*?);/)[1],bstr atob(arr[1]),n bstr.length,u8arr new Uint8Array(n);while (n--) {u8arr[n] bstr.charCodeAt(n);}return new Fil…...

编程日记 2025/7/15 17:45:16

【jvm】为什么要有GC

目录 1. 自动内存管理2. 提升程序稳定性3. 优化性能4. 跨平台能力5. 分代回收策略 1. 自动内存管理 1.JVM中的GC机制负责自动管理内存&#xff0c;这意味着开发人员不需要手动分配和释放内存。2.这一特性大大简化了Java程序的内存管理&#xff0c;降低了内存泄漏和内存溢出等问…...

编程日记 2025/7/15 13:12:35

开发指南085-大号版elementUI

ElementUI有些地方显示实在太小&#xff0c;不方便操作&#xff0c;需要放大&#xff1a; 1、el-dialog的标题栏那个关闭符号 使用如下方法放大 ::v-deep .el-dialog__headerbtn { font-size: 40px; font-weight: 700; top: 0px; } 2、el-table-column 设置sor…...

编程日记 2025/7/16 14:09:29

#渗透测试#红蓝对抗#SRC漏洞挖掘# Yakit（5）进阶模式-MITM中间人代理与劫持(下)

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

编程日记 2025/7/16 15:12:40

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦&#xff01;?? 基本配置 打包工具&#xff1a;Vite 前端框架&#xff1a;ElementPlus 开发语言&#xff1a;Vue3、TypeScript、Sass 代码检查&#xff1a;ESLint、Prettier IDE&#xff1a;WebSt…...

编程日记 2025/7/16 14:56:43

Mac 录制电脑系统内的声音的具体方法？

1.第一步&#xff1a;下载BlackHole 软件 方式1&#xff1a;BlackHole官方下载地址 方式2&#xff1a; 百度云下载 提取码: n5dp 2.第二步&#xff1a;安装BlackHole 双击下载好的BlackHole安装包&#xff0c;安装默认提示安装。 3.第三步&#xff1a;在应用程序中找到音频…...

编程日记 2025/7/16 14:50:11

计算机网络

1.网络协议是什么&#xff1f; 在计算机网络要做到有条不紊地交换数据&#xff0c;就必须遵守一些约定好的规则&#xff0c;比如交换数据地格式&#xff0c;是否需要发送一个应答信息。这些规则被称为网络协议。 分层结构 应用层&#xff1a;为计算机用户提供服务表示层&…...

编程日记 2025/7/15 19:49:12

爬取某市KFC餐厅信息（POST请求+PYMYSQL）

# 简介 本教程将指导您如何使用Python爬取石家庄市的KFC门店信息&#xff0c;并将这些信息存储到MySQL数据库中。我们将使用requests库来发送网络请求&#xff0c;pymysql库来操作MySQL数据库。 环境准备 在开始之前&#xff0c;请确保您已经安装了以下Python库&#xff1a…...

编程日记 2025/7/15 15:26:04

109.【C语言】数据结构之二叉树层序遍历

目录 1.知识回顾 2.代码实现 准备工作 LevelOrder函数 代码框架 关键代码 3.执行结果 1.知识回顾 层序遍历参见106.【C语言】数据结构之二叉树的三种递归遍历方式文章 截取的部分内容 定义:按层的方式遍历(,设n为树的深度,h1-->h2-->h3-->...-->hn) 以下面…...

编程日记 2025/7/16 14:31:28

Java转C之内存管理

从 Java 转向 C 语言开发&#xff0c;内存管理和指针是两个核心且关键的概念。这些概念在 Java 中被抽象和自动化处理&#xff0c;而在 C 语言中则需要开发者手动管理和操作。 目录 内存管理概述指针基础 指针的定义与初始化地址运算符 & 和解引用运算符 *指针运算 动态内…...

编程日记 2025/7/15 21:58:49

共享内存和信号量

一、共享内存原理 1、基础前提 共享内存是为了进程之间通信服务的。进程间的通信的核心是要让两个不同的进程看到同一份资源。之前的匿名管道通过父子进程继承的关系&#xff0c;让父子进程看到同一份资源&#xff0c;进而进行通信&#xff1b;命名管道则是通过唯一的路径让两…...

编程日记 2025/7/16 15:09:05

SED命令

基本用法&#xff1a; sed命令具体应用&#xff1a; 1.删除第2-5行 nl regular_express.txt | sed 2d结果&#xff1a; 2.在第二行之后新增两行&#xff0c;分别为"drink tea…" 和"drink beer?" nl regular_express.txt | sed 2 a\ drink tea...\…...

编程日记 2025/7/15 12:05:20

洛谷 P6368 [COCI2006-2007#6] MAGIJA C语言

题目&#xff1a;https://www.luogu.com.cn/problem/P6368 题目背景 知名魔术师 AlDimi Kartimi 需要你帮助他来设计他扑克牌的背面图案。 题目描述 众所周知&#xff0c;扑克牌的背面是一个矩形&#xff0c;通过做两边的中垂线可以将矩形分成相等的四部分。 AlDimi Karti…...

编程日记 2025/7/16 8:01:39

TDesign：Picker 选择器

Picker 选择器 API文档地址 单列选择器用法 /// view onTap:(){TDPicker.showMultiPicker(context,data: [controller.coinList],title: ,rightTextStyle: TextStyle(color: AppColors.ColorMain),onConfirm: (selected) {controller.onTapCoin(selected);Navigator.of(contex…...

编程日记 2025/7/16 14:24:42

LLMs之Agent之Lares：Lares的简介、安装和使用方法、案例应用之详细攻略

LLMs之Agent之Lares&#xff1a;Lares的简介、安装和使用方法、案例应用之详细攻略 导读&#xff1a;这篇博文介绍了 Lares&#xff0c;一个由简单的 AI 代理驱动的智能家居助手模拟器&#xff0c;它展现出令人惊讶的解决问题能力。 >> 背景痛点&#xff1a;每天都有新的…...

编程日记 2025/7/16 14:17:36

实验3-实时数据流处理-Flink

1.前期准备 &#xff08;1&#xff09;Flink基础环境安装 参考文章&#xff1a; 利用docker-compose来搭建flink集群-CSDN博客 显示为这样就成功了 &#xff08;2&#xff09;把docker&#xff0c;docker-compose&#xff0c;kafka集群安装配置好 参考文章&#xff1a; …...

编程日记 2025/7/15 4:52:18

axios笔记

一、axios是什么 前端最流行的ajax请求库 二、json-server json-server可以帮助我们搭建http服务 为什么要搭建http服务&#xff1f; &#xff1a;是因为我们用axios的时候&#xff0c;需要向服务端发送请求 我们需要服务端这样一个角色&#xff0c;来与axios结合做实践 1.…...

编程日记 2025/7/12 6:17:12

python拆分Excel文件

按Sheet拆分Excel 或 按照某一列的不同值拆分Excel。文档样式如下&#xff1a; 结果&#xff1a;红色是按照Sheet名拆出的&#xff0c;蓝色和橙色是某个Sheet按照某列的不同值拆分的。 代码&#xff1a; # -*- coding: utf-8 -*- """ 拆分excel文件——按照…...

编程日记 2025/7/11 8:43:49

使用IntelliJ IDEA开发Gradle插件并发布到本地

博主所用软件版本为&#xff1a; IntelliJ IDEA 2024.1.4 (Community Edition) Android Studio Ladybug Feature Drop | 2024.2.2 Beta 1 1、制作gradle插件&#xff08;IntelliJ IDEA 2024.1.4&#xff09; 新建groovy工程&#xff0c;File–>New–>Project… 右键点…...

编程日记 2025/7/13 13:10:07

C# 通过smtp发送邮件（配置好了参数可以直接用）

可以直接用 using System; using System.Net; using System.Net.Mail;class EmailSender {// 发送邮件的函数&#xff0c;接收SMTP配置作为参数public static void SendEmail(string smtpServer, int smtpPort, string senderEmail, string senderPassword, string subject, s…...

编程日记 2025/7/13 18:25:20

【数据结构】栈和队列

目录 1.栈 1.1.栈的概念及结构 1.2.栈的实现 2.队列 2.1.队列的概念及结构 2.2.队列的实现 3.运用栈理解一道题 4.使用两个队列实现一个栈 1.栈 1.1.栈的概念及结构 首先&#xff0c;我们来了解一种新的数据结构——栈。栈是一种特殊的线性表&#xff0c;其只允许在固…...

编程日记 2025/7/15 15:00:51

使用 Spring Doc 为 Spring REST API 生成 OpenAPI 3.0 文档

Spring Boot 3 整合 springdoc-openapi 概述 springdoc-openapi 是一个用于自动生成 OpenAPI 3.0 文档的库&#xff0c;它支持与 Spring Boot 无缝集成。通过这个库&#xff0c;你可以轻松地生成和展示 RESTful API 的文档&#xff0c;并且可以使用 Swagger UI 或 ReDoc 进行…...

编程日记 2025/7/16 10:36:23

网络数据库安全和数据安全概述

1、数据安全的三要素 完整性&#xff0c;机密性&#xff0c;可用性 2、安全技术和措施 数据完整性技术、数据备份和恢复技术、数据加密技术、访问控制技术、用户管理和身份验证技术 3、数据库安全 数据库安全是指数据库的任何部分都不允许受到侵害&#xff0c;或未经授权的…...

编程日记 2025/7/15 10:12:20

STM32F10X与GD32工程创建区别

1.宏定义区别 GD32虽然与STM32F10X的管脚兼容&#xff0c;但是用keil创建工程时&#xff0c;GD32在选择芯片型号的时候就已经自己定义了宏。STM32F10x需要手动定义宏。在以下界面定义用到的单片机。 2.时钟区别。GD32最大时钟为120Mhz,所用的hal库里面的系统初始化会初始化时钟…...

编程日记 2025/6/28 18:32:06

cmakelist使用总结

支持能编译成在不同系统上运行程序的方法 我们代码就一份&#xff0c;但有时需要编译成arm32&#xff0c;有时需要编译成x86_64,或更多 1、首先先将代码定义一个名称&#xff1a; #将所有的源文件列为一个集合&#xff0c;集合名字叫做SRC_LISTS set(SRC_LISTS main.cpp A.cpp…...

编程日记 2025/7/15 17:12:08

【论文阅读】国际开源发展经验及其对我国开源创新体系建设的启示

作者&#xff1a;包云岗老师 包云岗老师是计算机体系结构方向的大牛&#xff0c;推动了体系结构方面的开源事业! 欢迎对本栏目感兴趣的人学习"一生一芯"~ 学习体会&#xff1a; 承接前文&#xff0c;唐志敏老师讲到已有的软硬件生态系统和开发成本制约了对新结构的探…...

编程日记 2025/7/16 11:11:20

React 初学者指南：从零开始构建第一个 React 应用

React 是一个用于构建用户界面的 JavaScript 库&#xff0c;它能够让我们高效地构建复杂的 UI。对于 React 初学者来说&#xff0c;最重要的就是理解它的基本概念以及如何开始使用它。本文将引导你从零开始构建你的第一个 React 应用 1.1. 安装 React 环境 首先&#xff0c…...

编程日记 2025/7/15 21:18:59

力扣93题：复原 IP 地址

力扣93题&#xff1a;复原 IP 地址&#xff08;C语言实现详解&#xff09; 题目描述 给定一个只包含数字的字符串 s&#xff0c;复原它并返回所有可能的 IP 地址格式。 有效的 IP 地址需满足以下条件&#xff1a; IP 地址由四个整数&#xff08;每个整数位于 0 到 255 之间…...

编程日记 2025/7/12 23:48:47

字符编码发展历史

文章目录 发展历史- ASCII- ISO-8859- Unicode- UTF系列- UTF-8- UTF-16- UTF-32 - 中文编码- GB2312- GBK- GB18030 - 其他编码 归纳总结 发展历史 计算机的基础是二进制数字&#xff08;0和1&#xff09;。虽然人类日常使用的是各种字符&#xff08;如字母、数字、符号等&am…...

编程日记 2025/7/14 15:25:11

aws codepipeline + github + sonarqube + jenkins实践CI/CD

https://blog.csdn.net/u011564831/article/details/144007981文章浏览阅读1.2k次&#xff0c;点赞31次&#xff0c;收藏21次。本文使用 Jenkins 结合 CodeBuild, CodeDeploy 实现 Serverless 的 CI/CD 工作流&#xff0c;用于自动化发布已经部署 lambda 函数。在 AWS 海外区&a…...

编程日记 2025/7/14 9:50:28

KNN_识别图片数字

1.实验过程省略灰度化处理过程&#xff0c;用已经处理好的txt数据进行训练 3.jpg from PIL import Image def imgtotxt(imgfile,txtfile,size (32,32)):image_file Image.open(imgfile).resize(size,Image.LANCZOS).convert(L)width,height image_file.sizef open(txtfile,…...

编程日记 2025/7/14 10:07:34

python 清华pip镜像源报HTTP error 403

报错信息 ERROR: HTTP error 403 while getting https://mirrors.tuna.tsinghua.edu.cn/pypi/web/packages/52/79/a64937a2185b91a96cc5406e3ea58120980c725543d047e112fb3084a972/fake_useragent-2.0.0-py3-none-any.whl (from https://mirrors.tuna.tsinghua.edu.cn/pypi/we…...

编程日记 2025/7/1 19:53:47

HTTP 网络技术学习：缓存；为什么有时候出现问题要清除浏览器缓存？客户端缓存和服务端缓存是什么。

目录&#xff1a; 问题的背景Http的缓存是什么客户端设置缓存&#xff0c;需要服务端允许&#xff1f;缓存分类&#xff1a;为什么会有客户端缓存和服务器端缓存&#xff1f;客户端缓存的参数设置&#xff0c;举例代码实现缓存 一、问题的背景 有时候网站出现问题&#xff0…...

编程日记 2025/7/15 12:41:44

极限科技三周年庆典：追求极致，共创未来科技新篇章

2024 年 12 月 3 日&#xff0c;一场盛大的庆典活动在香港 IFS 集团旗下长沙玛珂酒店璀璨启幕&#xff0c;极限科技迎来了其三周年的辉煌庆典。此次庆典不仅是对极限科技过往成就的回顾与庆祝&#xff0c;更是对未来科技梦想的展望并开始新的启航。 庆典现场&#xff0c;极限科…...

编程日记 2025/7/13 20:07:26

利用PHP和GD库实现图片拼接的方法

利用PHP和GD库实现图片拼接的方法主要涉及到加载图片资源、创建目标画布、将图片资源绘制到目标画布上&#xff0c;并最终输出或保存拼接后的图片。以下是实现图片拼接的基本步骤&#xff1a; 加载图片资源&#xff1a; 使用imagecreatefromjpeg()、imagecreatefrompng()或ima…...

编程日记 2025/7/13 15:17:23

SpringBoot自动配置底层核心源码

SpringBoot底层核心源码 一、工程创建二、进一步改造三、自动配置 探究SpringBoot的自动配置原理&#xff0c;我们可以自己写一个启动类的注解。 一、工程创建 首先创建一个工程&#xff0c;工程目录如下&#xff1a; 自定义一个启动函数&#xff1a; package org.springboo…...

编程日记 2025/7/15 11:43:44

故障识别 | GADF-CNN-SSA-XGBoost数据分类预测/故障识别（Matlab）

故障识别 | GADF-CNN-SSA-XGBoost数据分类预测/故障识别&#xff08;Matlab&#xff09; 目录 故障识别 | GADF-CNN-SSA-XGBoost数据分类预测/故障识别&#xff08;Matlab&#xff09;分类效果基本描述程序设计参考资料 分类效果 基本描述 格拉姆角场差&#xff08;GADF&#…...

编程日记 2025/7/11 18:24:25

【VUE小型网站开发】优化通用配置 二

1. 引入 MyBatis Plus 1.1 添加依赖 <dependencies><!-- Spring Boot Starter Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- My…...

编程日记 2025/7/10 1:17:02

基于阻塞队列的生产者消费者模型动画演示

一个基于阻塞队列的生产者消费者模型的动画演示&#xff1a; 这是打包好的程序。程序是用 QT 写的。 通过网盘分享的文件&#xff1a;CP模型.7z 链接: https://pan.baidu.com/s/1YjC7YiSqHGqdr6bbffaDWg?pwde6g5 提取码: e6g5 CP模型...

编程日记 2025/7/3 14:33:14

springSecurity认证流程

Spring Security 是spring家族中的一个安全管理框架。相比于另一个安全框架Shiro&#xff0c;它提供更丰富的功能和社区资源&#xff0c;但也较难上手。所以一般大项目用spring Security&#xff0c;小项目用Shiro。 一般web应用需要认证和授权&#xff0c;这也是spring Secur…...

编程日记 2025/7/14 1:23:14

vite5+vue3+Ts5 开源图片预览器上线

images-viewer-vue3&#xff1a;一款Vue3的轻量级图像查看器&#xff0c;它基于Flip动画技术&#xff0c;支持PC和h5移动网页预览照片&#xff0c;如果它是Vue3开发的产品。 npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTabreadme Flip 动画 < …...

编程日记 2025/7/15 23:46:07

Qt开发：元对象系统的介绍和使用

文章目录 概述元对象系统的概念和组成QObject 的详细介绍1.QObject 的主要特性信号与槽机制动态属性对象树&#xff08;Object Trees&#xff09;事件处理 2.QMetaObject的主要特性函数签名常用功能 概述 Qt本身并不是一种编程语言&#xff0c;它实质上是一个跨平台的C开发类库…...

编程日记 2025/7/16 9:36:10

.vscode文件中各个脚本需要修改的地方

NOTE&#xff1a; 此篇文章由VSCode编辑GCC for ARM交叉编译工具链Makefile构建OpenOCD调试&#xff08;基于STM32的标准库&#xff09;派生而来&#xff0c;对.vscode文件中各个脚本需要修改的地方作补充说明。 tasks.json 该json文件的主要作用&#xff1a;使用XX名称去执行…...

编程日记 2025/7/14 19:52:35

JavaScript模块化规范

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

编程日记 2025/7/12 22:28:39

第二篇：k8s工作流程

我们来看通过deployment部署pod的常规流程&#xff1a; kubectl向apiserver发送部署请求&#xff08;例如使用 kubectl create -f deployment.yml&#xff09;apiserver将 Deployment 持久化到etcd&#xff1b;etcd与apiserver进行一次http通信。controller manager通过watch a…...

编程日记 2025/7/8 12:00:16

什么是数据架构？

数据架构是如何使用数据的蓝图--它是数据和数据相关资源的高层结构&#xff0c;是整个组织的数据框架&#xff0c;包括模型、规则和标准。通过高效的数据架构&#xff0c;企业可以跟踪整个 IT 基础设施中数据的获取、移动、存储、安全性和可访问性。 数据架构总览 数据架构是…...

编程日记 2025/7/15 1:29:10

ChatGPT、Python和OpenCV支持下的空天地遥感数据识别与计算——从0基础到15个案例实战

在科技飞速发展的时代&#xff0c;遥感数据的精准分析已经成为推动各行业智能决策的关键工具。从无人机监测农田到卫星数据支持气候研究&#xff0c;空天地遥感数据正以前所未有的方式为科研和商业带来深刻变革。然而&#xff0c;对于许多专业人士而言&#xff0c;如何高效地处…...

编程日记 2025/7/16 13:39:24

微信小程序权限授权工具类

最近写微信小程序的时候需要在页面获取设备权限&#xff0c;又不想每个页面都写&#xff0c;就写了一个工具类方便管理 /*** 权限工具类用于获取授权* 权限工具类使用方法&#xff0c;注意调用时函数需要定义为异步函数 async* import PermissionUtils from "./permissio…...

编程日记 2025/7/14 1:35:02