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

原生HTML放大镜

news 2026/3/29 12:53:51

该放大区域用背景图片放大

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">body {height: 1200px;background-color: lightskyblue;}ul {margin: 0;padding: 0;list-style: none;}.itemarea {position: relative;width: 500px;height: 680px;border: 1px black solid;margin: 50px auto;}.itemarea .pic {margin-bottom: 15px;}.itemarea img {width: 500px;height: 600px;}.itemarea .pic .cover {position: absolute;left: 0;top: 0;width: 200px;height: 200px;background-image: url(img/7.png);opacity: 0.6;display: none;}.itemarea .list {display: flex;}.itemarea .list li {margin: auto;}.itemarea .list img {display: block;width: 50px;height: 50px;}.itemarea .detail {position: absolute;top: 0;left: 500px;/* 此处为放大2倍，显示框的大小是遮阴框宽高的2倍 */width: 400px;height: 400px;display: none;border: 1px black solid;background: url(img/1.PNG);/* 此处放大2倍，背景图片的宽高是左边显示图片的2倍 */background-size: 1000px 1200px;/* background-size: 200%; 或者这样写*/}.itemarea .list .current {border: 2px green solid;}</style></head><body><div class="itemarea"><div class="pic"><img src="img/1.PNG"><div class="cover"></div></div><ul class="list"><li><img src="img/1.PNG"></li><li><img src="img/2.PNG"></li><li><img src="img/3.PNG"></li><li><img src="img/4.PNG"></li><li><img src="img/5.PNG"></li><li><img src="img/6.PNG"></li></ul><div class="detail"></div></div><script type="text/javascript">/* 需求1，鼠标放入图片时候，会动态修改图片地址2，鼠标放入大图，会动态修改右边图片位置2.1显示图片的放大镜，2.2显示右边效果*/var itemarea = document.querySelector(".itemarea");var list = document.querySelector(".list");/* 上面的大图片 */img = document.querySelector(".pic img");/* 所有的图片 */imgs = list.querySelectorAll("img");/* 主图片展示区域 */pic = document.querySelector(".itemarea .pic");/* 放大镜 */cover = document.querySelector(".cover");/* 放大的区域 */detail = document.querySelector(".detail");/* 监听事件，切换图片src */list.addEventListener("mousemove", function(e) {if (e.target.tagName == "IMG") {img.src = e.target.src;detail.style.backgroundImage = "url(" + e.target.src + ")";/* 遍历 所有边框都为空*/imgs.forEach(function(item) {item.className = "";})/* 选中的改变边框颜色*/e.target.className = "current";}})pic.addEventListener("mousemove", function(e) {/* 放大镜距离浏览器的距离 */var x = e.clientX;y = e.clientY;/* 图片框距离浏览器的距离 */cx = pic.getBoundingClientRect().left;cy = pic.getBoundingClientRect().top;tx = x - cx - 100;ty = y - cy - 100;if (tx < 0) {tx = 0;}if (ty < 0) {ty = 0;}/* 显示图片宽-遮阴框的宽 */if (tx >300) {tx = 300;}/* 显示图片高-遮阴框的高 */if (ty > 400) {ty = 400;}cover.style.left = tx + "px";cover.style.top = ty + "px";/* 根据遮阴框在盒子的移动距离百分比------对应放映框在大图片的移动距离百分比 *//*    tx,ty/遮阴框的极限范围 */detail.style.backgroundPosition = tx / 300 * 100 + "%" + ty / 400 * 100 + "%";})/* 移除隐藏 */itemarea.onmouseout = function() {cover.style.display = "none";detail.style.display = "none"}itemarea.onmouseover = function() {cover.style.display = "block";detail.style.display = "block";}</script></body>
</html>

效果如下：

在这里插入图片描述

相关文章：

原生HTML放大镜

该放大区域用背景图片放大 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compat…...

编程日记 2023/4/17 5:30:18

C++——模板

文章目录1 泛型编程2 函数模板2.1 函数模板概念2.2 函数模板格式2.3 函数模板的实例化2.3.1 隐式实例化2.3.1.1 定义2.3.1.2 代码演示2.3.1.3 运行结果2.3.1.4 缺点2.3.2 显式实例化2.3.2.1 格式2.3.2.2 代码演示2.3.2.3 运行结果2.4 模板参数的匹配原则2.4.12.4.22.4.33 类模板…...

编程日记 2023/4/17 5:30:09

Chapter2.1：线性表基础

该系列属于计算机基础系列中的《数据结构基础》子系列&#xff0c;参考书《数据结构考研复习指导》(王道论坛 组编)&#xff0c;完整内容请阅读原书。 1.线性表的定义和基本操作 1.1 线性表的定义 线性表是具有相同数据类型的n(n≥0)n(n≥0)n(n≥0)个数据元素的有限序列&…...

编程日记 2023/4/17 5:30:04

Spring源码解析-Spring 循环依赖

Spring源码解析简图&#xff1a; Spring 如何解决循环依赖&#xff0c;⽹上的资料很多&#xff0c;但是感觉写得好的极少&#xff0c;特别是源码解读⽅⾯&#xff0c;我就⾃⼰单独出⼀ 篇&#xff0c;这篇⽂章绝对肝&#xff01; 文章目录&#xff1a; 一. 基础知识 1.1 什么…...

编程日记 2023/4/17 5:30:00

从零开始学架构——架构设计的目的

软件架构的历史背景 软件架构真正流行是从20世纪90年代开始的&#xff0c;由于在Rational和Microsoft内部的相关活动&#xff0c;软件架构的概念开始越来越流行。 卡内基梅隆高校的玛丽肖(Mary Shaw)和戴维加兰 (David Garlan)对软件架构做了许多讨论,他们在 1994 年的一篇文章…...

编程日记 2023/4/17 5:29:54

Python 异步: 异步生成器（16）

动动发财的小手&#xff0c;点个赞吧&#xff01; 生成器是 Python 的基本组成部分。生成器是一个至少有一个“yield”表达式的函数。它们是可以暂停和恢复的函数&#xff0c;就像协程一样。 实际上&#xff0c;Python 协程是 Python 生成器的扩展。Asyncio 允许我们开发异步生…...

编程日记 2023/4/17 5:29:46

.net6 web api使用EF Core，根据model类自动生成表

1.安装EF Core和mysql数据库的nuget包 Microsoft.EntityFrameworkCore Pomelo.EntityFrameworkCore.MySql 2.创建models文件夹&#xff0c;在文件夹下创建实体类 public class Users{public int Id { get; set; }[Column(TypeName "varchar(200)"), Required]publ…...

编程日记 2023/4/17 5:29:41

计算机科学导论笔记（五）

目录 七、操作系统 7.1 引言 7.1.1 操纵系统 7.1.2 自举过程 7.2 演化 7.3 组成部分 7.3.1 用户界面 7.3.2 内存管理器 7.3.3 进程管理器 7.3.4 设备管理器 7.3.5 文件管理器 7.4 操作系统 7.4.1 UNIX 7.4.2 Linux 7.4.3 Windows 七、操作系统 7.1 引言 计算机…...

编程日记 2023/4/17 5:29:33

通过命令打Java可执行jar包

文章目录1.背景2.操作步骤2.1. 准备好java源文件2.2 确认java源文件中是否有包名2.3 编译java文件2.4 初步打包2.5 解压jar包&#xff0c;得到MANIFEST.MF文件2.6 修改MANIFEST.MF文件2.7 再次打包3.验证4.打包参数参考5.参考文章1.背景 今天&#xff0c;无意中翻出了N年之前年…...

编程日记 2023/4/17 5:29:27

java基础系列(九) 接口和抽象类

一. 接口 简单的说&#xff0c;接口就是一种被规范的标准&#xff0c;只要符合这个标准都可以通用&#xff0c;接口的表现 在于对行为的抽象. 1.1 创建接口的格式 格式1: public interface 接口名 格式2: interface 接口名 1.2 在JDK1.8之后, 在接口中可以定义实现的方…...

编程日记 2023/4/17 5:29:17

Docker启动问题docker is starting…

环境window 10 家庭最新版直接上官网安装的 Docker DeskTop问题启动应用后setting打开一直转圈圈&#xff1b;主界面一直显示 docker is starting…解决方案3.1 先确定hyper-v是否开启搜hyper-v&#xff0c;点击启动或关闭Windows功能如下,选中Hyper-V服务3.2 进入任务管理期&a…...

编程日记 2023/4/17 5:29:14

Django/Vue实现在线考试系统-03-开发环境搭建-MySQL安装

1.概述 MySQL是一种关系型数据库管理系统，所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型和大型网站的开发都选择 MySQL 作为网站数据库…...

编程日记 2023/4/18 1:19:45

python实现波士顿房价预测

波士顿房价预测 目标 这是一个经典的机器学习回归场景&#xff0c;我们利用Python和numpy来实现神经网络。该数据集统计了房价受到13个特征因素的影响&#xff0c;如图1所示。 对于预测问题&#xff0c;可以根据预测输出的类型是连续的实数值&#xff0c;还是离散值&#xff…...

编程日记 2023/4/18 1:19:43

Pinia不酸，保甜

为什么是Pinia 怎么说呢&#xff0c;其实在过往的大部分项目里面&#xff0c;我并没有引入过状态管理相关的库来维护状态。因为大部分的业务项目相对来说比较独立&#xff0c;哪怕自身功能复杂的时候&#xff0c;可能也仅仅是通过技术栈自身的提供的状态管理能力来处理业务场景…...

编程日记 2023/4/18 1:19:42

uniapp生命周期

uniapp生命周期 uniapp生命周期不同于vue生命周期&#xff0c;uniapp生命周期分为&#xff1a; 应用生命周期 页面生命周期 组件生命周期 应用生命周期(官网) 注意 应用生命周期仅可在App.vue中监听&#xff0c;在其它页面监听无效。 onlaunch里进行页面跳转&#xff0c;如遇白…...

编程日记 2023/4/18 1:19:40

经典卷积模型回顾11—Xception实现图像分类（matlab）

Xception是一种深度卷积神经网络&#xff0c;它采用了分离卷积来实现深度神经网络的高准确性和高效率。Xception的名称来自“extreme inception”&#xff0c;意思是更加极致的Inception网络。 在传统的卷积神经网络中&#xff0c;每个卷积层都有若干个滤波器&#xff08;即卷…...

编程日记 2023/4/18 1:19:38

移动App性能测试包含哪些内容?App性能测试工具有哪些?

随着互联网高科技的蓬勃发展&#xff0c;移动app的的需求量和供给量都较大。但一款好app的成功上线以及为用户带来高效体验&#xff0c;性能测试起着关键性的作用。性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试&#xff0…...

编程日记 2023/4/18 1:19:36

AI测试的迷思

近年来&#xff0c;我一直关注AI相关的测试&#xff0c;并积极参与多个全国性测试社区和社群。在这些社区中&#xff0c;我与不同公司和领域的测试专家交流探讨AI测试相关话题&#xff0c;包括业界顶尖公司的专家和国内知名测试学者。我也参加了多个大会&#xff0c;聆听了许多…...

编程日记 2023/4/18 1:19:34

[ 红队知识库 ] 一些常用bat文件集合

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

编程日记 2023/4/18 1:19:32

Qt广告机服务器（上位机）

目录功能结构adSever.promain.cpptcp_MSG.h 共用Tcp传输信息adsever.h 服务器adsever.cpp 服务器addate.h 时间处理addate.cpp 时间处理adtcp.h 客户端Socket处理adtcp.cpp 客户端Socket处理client.h 客户端信息类client.cpp 客户端信息类admsglist.h 信息记录模块admsglist.cp…...

编程日记 2023/4/18 1:19:30

EEVDF调度器完全调优指南：从lag公式推导到place_entity()参数配置

EEVDF调度器完全调优指南&#xff1a;从lag公式推导到place_entity()参数配置 在Linux内核6.6版本中&#xff0c;EEVDF&#xff08;Earliest Eligible Virtual Deadline First&#xff09;调度器正式取代CFS成为默认进程调度算法。这一变革不仅带来了更精细的权重分配机制&…...

编程新知 2026/3/29 12:34:13

Uvicorn ASGI服务器部署架构深度解析：从单机到生产集群的完整指南

Uvicorn ASGI服务器部署架构深度解析&#xff1a;从单机到生产集群的完整指南 【免费下载链接】uvicorn An ASGI web server, for Python. &#x1f984; 项目地址: https://gitcode.com/GitHub_Trending/uv/uvicorn 在Python异步Web开发领域&#xff0c;Uvicorn已成为高…...

编程新知 2026/3/29 12:16:04

Kimi-VL-A3B-Thinking开源大模型实操：模型微调适配垂直领域数据

Kimi-VL-A3B-Thinking开源大模型实操&#xff1a;模型微调适配垂直领域数据 1. 引言&#xff1a;为什么你需要关注这个模型&#xff1f; 如果你正在寻找一个既能看懂图片&#xff0c;又能像人一样思考的多模态模型&#xff0c;那么Kimi-VL-A3B-Thinking绝对值得你花时间了解。…...

编程新知 2026/3/29 12:06:02

连云港市区本地人推荐的特色家常铁锅炖餐厅

在连云港市区&#xff0c;有一家备受本地人推崇的特色家常铁锅炖餐厅——灶福乐东北铁锅炖。它凭借独特的魅力&#xff0c;成为了本地家庭、企业团建以及游客打卡的热门之选。下面&#xff0c;让我们深入了解这家餐厅的过人之处。一、品牌故事&#xff1a;坚守正宗&#xff0c;…...

编程新知 2026/3/29 9:58:15

LumiPixel模型API接口调用详解：Python/Node.js快速集成

LumiPixel模型API接口调用详解&#xff1a;Python/Node.js快速集成 1. 前言&#xff1a;为什么选择API集成 如果你正在开发一个需要AI生成能力的应用&#xff0c;直接调用现成的模型API可能是最高效的方式。LumiPixel Canvas Quest模型提供了简单易用的API接口&#xff0c;让…...

编程新知 2026/3/29 8:53:55

跨平台文件同步方案：OpenClaw+Qwen3-32B智能归档系统

跨平台文件同步方案&#xff1a;OpenClawQwen3-32B智能归档系统 1. 为什么需要智能文件同步 作为一个长期在多台设备间切换工作的开发者&#xff0c;我深受文件管理混乱的困扰。Mac上的设计稿、Windows里的开发文档、Linux服务器上的日志文件——这些散落在各处的数据就像一座…...

编程新知 2026/3/29 7:21:23

从命令行到可视化：深入解读ROS2中Mavros发布的IMU话题数据（`/mavros/imu/data`）

从命令行到可视化&#xff1a;深入解读ROS2中Mavros发布的IMU话题数据&#xff08;/mavros/imu/data&#xff09; 当你在ROS2环境中通过Mavros获取飞控的IMU数据时&#xff0c;/mavros/imu/data这个话题就像一扇通往飞行器感知世界的窗口。但面对那些看似晦涩的四元数、协方差矩…...

编程新知 2026/3/29 5:58:14

Vite 8 架构革新：从双引擎到 Rolldown 统一打包的演进之路

1. Vite 8 架构革新的背景与痛点 如果你用过 Vite 7 或更早版本&#xff0c;一定对它的闪电般开发体验印象深刻。这主要得益于 Vite 独特的双引擎架构&#xff1a;开发时用 esbuild 实现毫秒级启动&#xff0c;生产环境则用 Rollup 保证打包质量。但我在实际项目中发现&#xf…...

编程新知 2026/3/29 5:44:05

Mac清理工具Pearcleaner：残留文件处理与系统优化完全指南

Mac清理工具Pearcleaner&#xff1a;残留文件处理与系统优化完全指南 【免费下载链接】Pearcleaner Open-source mac app cleaner 项目地址: https://gitcode.com/gh_mirrors/pe/Pearcleaner Pearcleaner是一款免费开源的Mac应用清理工具&#xff0c;专为彻底卸载应用程…...

编程新知 2026/3/29 5:36:01

QwQ-32B在自然语言处理中的实战应用

QwQ-32B在自然语言处理中的实战应用 1. 引言&#xff1a;当NLP遇上推理专家 自然语言处理&#xff08;NLP&#xff09;领域最近迎来了一位强力选手——QwQ-32B。这不是普通的语言模型&#xff0c;而是一个专门为推理和思考设计的模型。想象一下&#xff0c;你有一个不仅能理解…...

编程新知 2026/3/29 5:25:59