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

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

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

感兴趣的可以关注下我的系列课程【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的初始lefttop必须预先存起来,不能使用当前的最新lefttop

相关文章:

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

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

LVGL9 定时器模块

文章目录 前言定时器系统概述特点 定时器的创建函数&#xff1a;lv_timer_create函数&#xff1a;lv_timer_create_basic 定时器的控制函数&#xff1a;lv_timer_ready函数&#xff1a;lv_timer_reset 定时器的参数设置函数&#xff1a;lv_timer_set_cb函数&#xff1a;lv_time…...

Qt学习笔记第51到60讲

第51讲 记事本实现打开功能 回到第24个功能文件Notepad&#xff0c;给UI中的各个控件添加槽函数。 ①开始按钮 void Widget::on_btnOpen_clicked() {QString fileNameQFileDialog::getOpenFileName(this,tr("Open File"),"E:\\6_Qt Projects\\24_Notepad\\fi…...

网页设计--axios作业

根据以下mock地址中的json数据&#xff0c;使用axios异步方式获取并显示在页面中。 https://apifoxmock.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId171582689 {"code": 1,"msg": "success","data": [{"id": …...

SpringBoot 整合 Avro 与 Kafka 详解

SpringBoot 整合 Avro 与 Kafka 详解 在大数据处理和实时数据流场景中&#xff0c;Apache Kafka 和 Apache Avro 是两个非常重要的工具。Kafka 作为一个分布式流处理平台&#xff0c;能够高效地处理大量数据&#xff0c;而 Avro 则是一个用于序列化数据的紧凑、快速的二进制数…...

若依 ruoyi VUE el-select 直接获取 选择option 的 label和value

1、最新在研究若依这个项目&#xff0c;我使用的是前后端分离的方案&#xff0c;RuoYi-Vue-fast(后端) RuoYi-Vue-->ruoyi-ui(前端)。RuoYi-Vue-fast是单应用版本没有区分那么多的modules 自己开发起来很方便&#xff0c;这个项目运行起来很方便&#xff0c;但是需要自定义的…...

大数据-155 Apache Druid 架构与原理详解 数据存储 索引服务 压缩机制

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

修改MySQL存储路径

1.查看原路径 show variables like ‘%datadir%’; 2.停止MYSQL 以管理员身份运行命令提示符 net stop MySQL84 在服务中直接停止MySQL 3.编辑配置文件 可能会遇到无权限修改&#xff0c;可以先修改my.ini的权限。可以通过&#xff1a;右键my.ini → 属性 → 安全→ 编辑 …...

Git常用的命令【提交与回退】

git分布式版本控制系统 &#xff08;SVN集中式版本控制系统&#xff09;之间的对比 git有本地仓库和远程仓库&#xff0c;不同的开发人员可以分别提交自己的本地仓库并维护代码的版本控制。 然后多个人员在本地仓库协作的代码&#xff0c;可以提交到远程仓库中做整合。 git本…...

详解:HTTP/HTTPS协议

HTTP协议 一.HTTP是什么 HTTP&#xff0c;全称超文本传输协议&#xff0c;是一种用于分布式、协作式、超媒体信息系统的应用层协议。HTTP往往是基于传输层TCP协议实现的&#xff0c;采用的一问一答的模式&#xff0c;即发一个请求&#xff0c;返回一个响应。 Q&#xff1a;什…...

0.96寸OLED---STM32

一、简介 OLED&#xff1a;有机发光二极管 OLED显示屏&#xff1a;性能优异的新型显示屏&#xff0c;具有功耗低&#xff08;相比LCD不需要背光源&#xff0c;每一个节点当度发光&#xff09;、响应速度快、宽视角&#xff08;自发光&#xff0c;从任何视角看都比较清晰&…...

保姆级教学 uniapp绘制二维码海报并保存至相册,真机正常展示图片二维码

一、获取二维码 uni.request({url: https://api.weixin.qq.com/wxa/getwxacode?access_token${getStorage("token")},responseType: "arraybuffer",method: "POST",data: {path: "/pages/index/index"},success(res) {// 转换为 Uint…...

常用Vim操作

vimrc配置 ctags -R * 生成tags文件 set number set ts4 set sw4 set autoindent set cindent set tag~/tmp/log/help/tags 自动补全&#xff1a; ctrln&#xff1a;自动补全 输入&#xff1a; a&#xff1a;从当前文字后插入i&#xff1a;从当前文字前插入s: 删除当前字…...

【C#】NET 9中LINQ的新特性-CountBy

前言 在 .NET 中,使用 LINQ 对元素进行分组并计算它们的出现次数时,需要通过两个步步骤。首先,使用 GroupBy方法根据特定键对元素进行分类。然后,再计算每个组元素包含个数。而随着 .NET 9 版本发布,引入了一些新特性。其中 LINQ 引入了一种新的方法 CountBy,本文一起来了…...

Trimble X9三维激光扫描仪高效应对化工厂复杂管道扫描测绘挑战【沪敖3D】

化工安全关系到国计民生&#xff0c;近年来随着化工厂数字化改革不断推进&#xff0c;数字工厂逐步成为工厂安全管理的重要手段。而化工管道作为工厂设施的重要组成部分&#xff0c;由于其数量多、种类繁杂&#xff0c;一直是企业管理的重点和难点。 传统的化工管廊往往缺乏详…...

【数据结构】文件和外部排序

外部排序 外存信息的存取 计算基本存储方式 内部存储&#xff08;主存&#xff09;&#xff1a;断电后数据会丢失&#xff0c;访问速度快&#xff0c;成本高容量通常较小外部存储&#xff08;辅存&#xff09;&#xff1a;断电后数据不会丢失&#xff0c;访问速度较慢&#x…...

新手学习:网页前端、后端、服务器Tomcat和数据库的基本介绍

首先一点&#xff0c;不管是那个框架开发的网页前端&#xff0c;最后都需要Build,构建完毕以后都是原始的HTML CSS JS 三样文件&#xff01; 网页前端 目录结构 在开始开发网站之前&#xff0c;首先需要了解如何组织文件。一个简单的网页项目通常会有以下几个文件夹和文件&…...

机器学习贝叶斯模型原理

一、引言 在机器学习与数据分析的广袤天地中&#xff0c;贝叶斯模型犹如一颗璀璨的明星&#xff0c;闪耀着独特的光芒&#xff0c;为众多领域的分类、预测等任务提供了强大的理论支撑与实用解法。然而&#xff0c;对于许多初涉此领域的小伙伴而言&#xff0c;贝叶斯模型背后的…...

【C++】实现100以内素数的求解

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;代码概览&#x1f4af;代码结构与逻辑分析1. 包含的头文件和命名空间2. 素数判断函数 isPrime功能输入与输出核心逻辑数学背景 3. 主函数 main功能核心逻辑输出示例 &#…...

Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!

Python 浏览器自动化新利器&#xff1a;DrissionPage&#xff0c;让网页操作更简单&#xff01; 文章目录 Python 浏览器自动化新利器&#xff1a;DrissionPage&#xff0c;让网页操作更简单&#xff01;&#x1f680; 引言&#x1f31f; DrissionPage简介&#x1f6e0;️ 三大…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...