js 图片放大镜
写购物项目的时候，需要放大图片，这里用js写了一个方法，鼠标悬浮的时候放大当前图片
这个是class写法
<!--* @Descripttion: * @Author: 苍狼一啸八荒惊* @LastEditTime: 2024-07-10 09:41:34* @LastEditors: 夜空苍狼啸
--><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品详情</title><!-- <link rel="stylesheet" href="./css/detail.css"> --><style>.product_wrapper {width: 1200px;margin: 0 auto;font: 12px "Hiragino Sans GB", "Verdana", "Simsun";background-color: #fff;}.product_wrapper .detail {overflow: hidden;}.product_wrapper .detail .list_detail {width: 320px;height: 320px;float: left;padding: 0 20px 30px 0;position: relative;}.product_wrapper .detail .list_detail .list_detail_1 {width: 280px;height: 280px;position: relative;}.product_wrapper .detail .list_detail .list_detail_1>img {width: 100%;height: 100%;}.product_wrapper .detail .list_detail .list_detail_1 .mask {width: 150px;height: 150px;background: url(../img/zoom_pup.png);opacity: 0.5;position: absolute;left: 30px;top: 40px;pointer-events: none;display: none;}.product_wrapper .detail .list_detail .list_detail_2 {position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-evenly;align-items: center;}.product_wrapper .detail .list_detail .list_detail_2>img {width: 54px;height: 54px;margin-right: 50px;cursor: pointer;}.product_wrapper .detail .list_detail .list_detail_2 .active {box-shadow: 0 0 8px rgb(255, 255, 255) inset, 0 0 8px red;}.product_wrapper .detail .list_detail .list_detail_enlarge {width: 480px;height: 480px;position: absolute;position: absolute;left: 90%;top: 0;overflow: hidden;display: none;z-index: 999;}.product_wrapper .detail .list_detail .list_detail_enlarge>img {display: block;width: 800px;height: 800px;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="product_wrapper"><div class="detail hover"><div class="list_detail" id="box"><!-- 放大镜 --><div class="list_detail_1"><img src="./img/lx1.jpg" alt=""><div class="mask"></div></div><div class="list_detail_2"><img src="./img/lx1.jpg" class="active" alt="" data-show="./img/lx1.jpg" data-bg="./img/lx1.jpg"><img src="./img/lx2.jpg" alt="" data-show="./img/lx2.jpg" data-bg="./img/lx2.jpg"><img src="./img/lx3.jpg" alt="" data-show="./img/lx3.jpg" data-bg="./img/lx3.jpg"></div><div class="list_detail_enlarge enlarge"><!-- <img src="./img/lx1.jpg" alt=""> --><img src="http://img3m2.ddimg.cn/27/17/25583112-1_u_11.jpg" alt=""></div></div></div></div><!-- 引入放大镜 --><!-- <script src="./js/detail.js"></script> --><script>// 放大镜class Enlarge {constructor(select) {// 0-1. 获取到范围元素, 目的是为了让所有内容都出现在这里面this.ele = document.querySelector(select)this.show = this.ele.querySelector('.list_detail_1')this.mask = this.ele.querySelector('.mask')this.list = this.ele.querySelector('.list_detail_2')this.enlarge = this.ele.querySelector('.enlarge')this.bg = this.enlarge.firstElementChild// 需要一些尺寸数据this.show_w = this.show.clientWidththis.show_h = this.show.clientHeight// 非行内样式获取this.mask_w = parseInt(window.getComputedStyle(this.mask).width)this.mask_h = parseInt(window.getComputedStyle(this.mask).height)this.bg_w = parseInt(window.getComputedStyle(this.bg).width)this.bg_h = parseInt(window.getComputedStyle(this.bg).height)// 在这里调用函数来启动this.setScale()this.overOut()this.listChange()this.move()}// 计算数值setScale() {// 1. 计算数值this.enlarge_w = this.mask_w * this.bg_w / this.show_wthis.enlarge_h = this.mask_h * this.bg_h / this.show_h// 2. 给 this.enlarge 赋值this.enlarge.style.width = this.enlarge_w + 'px'this.enlarge.style.height = this.enlarge_h + 'px'}// 鼠标经过显示遮罩层, 图片放大overOut() {this.show.addEventListener('mouseover', () => {this.mask.style.display = 'block'this.enlarge.style.display = 'block'})this.show.addEventListener('mouseout', () => {this.mask.style.display = 'none'this.enlarge.style.display = 'none'})}// tab 切换listChange() {this.list.addEventListener('click', e => {// 处理事件对象兼容e = e || window.event// 处理事件目标兼容const target = e.target || e.srcElement// 判断点击的是 img 标签if (target.nodeName !== 'IMG') return// 1. 切换 img 类名for (let i = 0; i < this.list.children.length; i++) {this.list.children[i].classList.remove('active')}target.classList.add('active')// 2. 切换 show里面img 和 bg 的 srcconst showUrl = target.dataset.showconst bgUrl = target.dataset.bgthis.show.firstElementChild.src = showUrlthis.bg.src = bgUrl})}// 鼠标移动move() {// 1. 绑定事件this.show.addEventListener('mousemove', e => {e = e || window.event// 2. 获取光标坐标点let x = e.offsetX - this.mask_w / 2let y = e.offsetY - this.mask_h / 2// 3. 边界值判断if (x <= 0) x = 0if (y <= 0) y = 0if (x >= this.show_w - this.mask_w) x = this.show_w - this.mask_wif (y >= this.show_h - this.mask_h) y = this.show_h - this.mask_hthis.mask.style.left = x + 'px'this.mask.style.top = y + 'px'const bg_x = x * this.enlarge_w / this.mask_w * -1const bg_y = y * this.enlarge_h / this.mask_h * -1this.bg.style.left = bg_x + 'px'this.bg.style.top = bg_y + 'px'})}}const enlarge = new Enlarge('#box')</script></body></html>
这个是函数写法
<!--* @Descripttion: * @Author: 苍狼一啸八荒惊* @LastEditTime: 2024-07-10 09:41:34* @LastEditors: 夜空苍狼啸
--><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品详情</title><!-- <link rel="stylesheet" href="./css/detail.css"> --><style>.product_wrapper {width: 1200px;margin: 0 auto;font: 12px "Hiragino Sans GB", "Verdana", "Simsun";background-color: #fff;}.product_wrapper .detail {overflow: hidden;}.product_wrapper .detail .list_detail {width: 320px;height: 320px;float: left;padding: 0 20px 30px 0;position: relative;}.product_wrapper .detail .list_detail .list_detail_1 {width: 280px;height: 280px;position: relative;}.product_wrapper .detail .list_detail .list_detail_1>img {width: 100%;height: 100%;}.product_wrapper .detail .list_detail .list_detail_1 .mask {width: 150px;height: 150px;background: url(../img/zoom_pup.png);opacity: 0.5;position: absolute;left: 30px;top: 40px;pointer-events: none;display: none;}.product_wrapper .detail .list_detail .list_detail_2 {position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-evenly;align-items: center;}.product_wrapper .detail .list_detail .list_detail_2>img {width: 54px;height: 54px;margin-right: 50px;cursor: pointer;}.product_wrapper .detail .list_detail .list_detail_2 .active {box-shadow: 0 0 8px rgb(255, 255, 255) inset, 0 0 8px red;}.product_wrapper .detail .list_detail .list_detail_enlarge {width: 480px;height: 480px;position: absolute;position: absolute;left: 90%;top: 0;overflow: hidden;display: none;z-index: 999;}.product_wrapper .detail .list_detail .list_detail_enlarge>img {display: block;width: 800px;height: 800px;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="product_wrapper"><div class="detail hover"><div class="list_detail" id="box"><!-- 放大镜 --><div class="list_detail_1"><img src="./img/lx1.jpg" alt=""><div class="mask"></div></div><div class="list_detail_2"><img src="./img/lx1.jpg" class="active" alt="" data-show="./img/lx1.jpg" data-bg="./img/lx1.jpg"><img src="./img/lx2.jpg" alt="" data-show="./img/lx2.jpg" data-bg="./img/lx2.jpg"><img src="./img/lx3.jpg" alt="" data-show="./img/lx3.jpg" data-bg="./img/lx3.jpg"></div><div class="list_detail_enlarge enlarge"><img src="./img/lx1.jpg" alt=""></div></div></div></div><!-- 引入放大镜 --><!-- <script src="./js/detail.js"></script> --><script>/** @Descripttion: * @Author: 苍狼一啸八荒惊* @LastEditTime: 2024-07-10 10:18:57* @LastEditors: 夜空苍狼啸*/// 放大镜// 0-1. 获取到范围元素, 目的是为了让所有内容都出现在这里面
let ele = document.querySelector('#box')
let show = ele.querySelector('.list_detail_1')
let mask = ele.querySelector('.mask')
let list = ele.querySelector('.list_detail_2')
let enlarge = ele.querySelector('.enlarge')
let bg = enlarge.firstElementChild
// 需要一些尺寸数据
let show_w = show.clientWidth
let show_h = show.clientHeight
// 非行内样式获取
let mask_w = parseInt(window.getComputedStyle(mask).width)
let mask_h = parseInt(window.getComputedStyle(mask).height)
let bg_w = parseInt(window.getComputedStyle(bg).width)
let bg_h = parseInt(window.getComputedStyle(bg).height)// 计算数值
// 1. 计算数值
enlarge_w = mask_w * bg_w / show_w
enlarge_h = mask_h * bg_h / show_h// 2. 给 enlarge 赋值
enlarge.style.width = enlarge_w + 'px'
enlarge.style.height = enlarge_h + 'px'// 鼠标经过显示遮罩层, 图片放大show.addEventListener('mouseover', () => {mask.style.display = 'block'enlarge.style.display = 'block'
})show.addEventListener('mouseout', () => {mask.style.display = 'none'enlarge.style.display = 'none'
})// tab 切换list.addEventListener('click', e => {// 处理事件对象兼容e = e || window.event// 处理事件目标兼容const target = e.target || e.srcElement// 判断点击的是 img 标签if (target.nodeName !== 'IMG') return// 1. 切换 img 类名for (let i = 0; i < list.children.length; i++) {list.children[i].classList.remove('active')}target.classList.add('active')// 2. 切换 show里面img 和 bg 的 srcconst showUrl = target.dataset.showconst bgUrl = target.dataset.bgshow.firstElementChild.src = showUrlbg.src = bgUrl
})// 鼠标移动// 1. 绑定事件
show.addEventListener('mousemove', e => {e = e || window.event// 2. 获取光标坐标点let x = e.offsetX - mask_w / 2let y = e.offsetY - mask_h / 2// 3. 边界值判断if (x <= 0) x = 0if (y <= 0) y = 0if (x >= show_w - mask_w) x = show_w - mask_wif (y >= show_h - mask_h) y = show_h - mask_hmask.style.left = x + 'px'mask.style.top = y + 'px'const bg_x = x * enlarge_w / mask_w * -1const bg_y = y * enlarge_h / mask_h * -1bg.style.left = bg_x + 'px'bg.style.top = bg_y + 'px'
})</script></body></html>
相关文章：
js 图片放大镜
写购物项目的时候，需要放大图片，这里用js写了一个方法，鼠标悬浮的时候放大当前图片 这个是class写法 <!--* Descripttion: * Author: 苍狼一啸八荒惊* LastEditTime: 2024-07-10 09:41:34* LastEditors: 夜空苍狼啸 --><!DOCTYPE …...
数据模型-ER图在数据模型设计中的应用
ER图在数据模型设计中的应用 1. ER图概述：起源与发展 实体-关系图（Entity Relationship Diagram，简称ER图）起源于1970年代，由Peter Chen首次提出，作为描述数据和信息间关系的图形化语言。随着数据库技术…...
C++ //练习 14.46 你认为应该为Sales_data类定义上面两种类型转换运算符吗？应该把它们声明成explicit的吗？为什么？
C Primer（第5版） 练习 14.46 练习 14.46 你认为应该为Sales_data类定义上面两种类型转换运算符吗？应该把它们声明成explicit的吗？为什么？ 环境：Linux Ubuntu（云服务器） 工具&…...
tensorflow张量生成以及常用函数
张量tensor：多维数组（列表） 阶：张量的维数 维数 阶 名字 例子 0-D 0 标量 scalar s 1， 2， 3 1-D 1 向量 vector…...
如何在 Windows 10 上恢复未保存的 Word 文档
您是否整晚都在处理一个重要的 word 文件，但忘记保存它了？本文适合您。在这里，我们将解释如何恢复未保存的 word 文档。除此之外，您还将学习如何恢复已删除的 word 文档。 从专业人士到高中生，每个人都了解丢失重要 W…...
Rust入门实战 编写Minecraft启动器#3解析资源配置
首发于Enaium的个人博客 在上一篇文章中，我们已经建立了资源模型，接下来我们需要解析游戏的配置文件。 首先我们添加serde_json依赖和model依赖。 model { path "../model" } serde_json "1.0"之后我们在lib.rs中添加解析的tra…...
openFileInput 内部保持的数据如何删除
在Android中，openFileInput 是用于从设备内部存储中读取文件的API，但它本身并不提供直接删除文件的功能。要删除通过 openFileInput 读取的文件，你需要使用其他方法。以下是如何删除内部存储中文件的步骤和说明： 步骤 获取文件路…...
Python编写的俄罗斯方块小游戏
文章目录 游戏页面实现代码 游戏页面 左右键移动方块位置，上键切换方块形态。 实现代码 import pygame import random# 初始化 Pygame pygame.init()# 定义颜色 colors [(0, 0, 0), # 黑色(255, 0, 0), # 红色(0, 255, 0), # 绿色(0, 0, 255), # 蓝色(255,…...
前端直连小票打印机，前端静默打印，js静默打印解决方案
最近公司开发了一个vue3收银系统，需要使用小票打印机打印小票，但是又不想结账的时候弹出打印预览，找了很多方案，解决不了js打印弹出的打印预览窗口！ 没办法，自己写了一个winform版本的静默打印软件…...
python批量读取Excel数据写入word
from docx import Document from docx.shared import Pt from docx.enum.table import WD_TABLE_ALIGNMENT, WD_ROW_HEIGHT_RULE import os import pandas as pd from docx import Document from docx.oxml.ns import qn from docx.shared import Pt # ... 其他代码 ... work…...
Unity 常用取整方法
向下取整：Mathf.FloorToInt（） 向上取整：Math.Ceiling 截断取整：(int) 四舍五入：Mathf.RoundToInt e.NewValues.value.ToString(“F0”) 百分比： int i 400; int j 200; string p ((double)i…...
Apache Seata Mac下的Seata Demo环境搭建
本文来自 Apache Seata官方文档，欢迎访问官网，查看更多深度文章。 本文来自 Apache Seata官方文档，欢迎访问官网，查看更多深度文章。 Mac下的Seata Demo环境搭建（AT模式） 前言 最近因为工作需要…...
记录｜C#安装+HslCommunication安装
记录线索 前言一、C#安装1.社区版下载2.VS2022界面设置 二、HslCommunication安装1.前提2.安装3.相关文件【重点】 更新记录 前言 初心是为了下次到新的电脑上安装VS2022做C#上机位项目时能快速安装成功。 一、C#安装 1.社区版下载 Step1. 直接点击VS2022，跳转下…...
Android 12系统源码_设备设置（一）Settings介绍
前言 Settings 类是一个用于访问和管理设备设置的关键类，而作为系统开发人员，经常需要用这个类来做一些系统设备设置，而Settings里面存在着好几个处理不同领域的设备设置类，那么如何才能结合自己的业务场景正确选择使用这些设备设…...
如何查看GD32 Keil和IAR工程的map文件
我们在设计调试程序时，往往需要知道一个函数或一个变量它在MCU中具体所在的地址以及所占用的空间大小，这时候就需要查看map文件。 那么什么是map文件呢？map文件是编译器编译工程后生成的一个文件，文件会有很多信息，比…...
1Panel安装命令脚本大全，多Linux操作系统版本
1Panel安装命令脚本大全，包括RedHat、CentOS、Ubuntu、Debian和openEuler等linux操作系统，码笔记整理1Panel安装命令脚本清单： RedHat/CentOS安装命令： curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh…...
校园电动车安全监控和调度系统-计算机毕业设计源码13028
摘要 校园电动车安全监控和调度系统是为了确保校园内电动车的安全和高效运行而设计的。该系统通过安装在电动车上的监控设备，实时监测电动车的运行状态，包括速度、位置、电池电量等，一旦发现异常情况，系统会立即发出警报并通知相关…...
【LLM之Agent】ReAct论文阅读笔记
研究背景 论文介绍了 “ReAct” 范式，该范式旨在融合推理和行动的功能，通过让大型语言模型（LLMs）生成既包括言语推理轨迹又包括行动序列的输出，解决多种语言推理和决策任务。这种方法允许模型在与外部环境（…...
LeetCode 125. 验证回文串
更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡，更多解法等你一起来参与哦！ LeetCode 125. 验证回文串，难度简单。 双指针 解题思路： 遍历字符串，将所有大写字符转换为小写字符、并移除所…...
IT审计必看！对比旧版，CISA考试改版升级亮点和重点内容是什么？
官方通知，今年8月1日，CISA新版考纲正式上线，旧版在7月23日后就无法约考了。 艾威培训邀请了国内知名的IT审计CISA授课老师吴老师来为大家详细讲解CISA新版考纲的变化 目前第28th版教材只有英文版，中文版尚未发布。我们艾威经验丰…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 （1）设置网关 打开VMware虚拟机，点击编辑…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)
引言 在嵌入式系统中，用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例，介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单，执行相应操作，并提供平滑的滚动动画效果。 本文设计了一个…...
2025.6.9总结（利与弊）
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题，从一个接口人不断溯源到另一个 接口人。有时候，不知道是谁的责任填。将工作内容分的很细，每个人负责其中的一小块。我清楚的意识到，自己就是个可以随时替换的螺丝钉&…...