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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3226256.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

市场流行的蜗牛星际NAS和Think Pad X250硬件CPU等比较

市场流行的蜗牛星际NAS和Think Pad X250硬件CPU等比较

当前二手市场流行的Mini服务器硬件是蜗牛星际NAS套件&#xff0c;流行的笔记本是Think Pad X230以及Think Pad X250&#xff0c;这里就比较下蜗牛和X250,因为它们都是低功耗、低运算的架构&#xff0c;至于神机Think Pad X230&#xff0c;它的速度太快&#xff0c;功耗太高&…
阅读更多...
PCI PTS 硬件安全模块（HSM）模块化安全要求 v5.0

PCI PTS 硬件安全模块（HSM）模块化安全要求 v5.0

符合条件的 PCI SSC 利益相关者在 30 天的意见征询 (RFC) 期间审查 PCI PTS 硬件安全模块 (HSM) 模块化安全要求 v5.0 草案并提供反馈。 PCI PTS 硬件安全模块(HSM)模块化安全要求 v5.0图 从 7 月 8 日到 8 月 8 日&#xff0c;邀请符合条件的 PCI SSC 利益相关者在 30 天的意见…
阅读更多...
结构体案例1

结构体案例1

代码 #include <iostream> using namespace std; #include <string> #include <ctime>//学生的结构体 struct Student {string sName;int score; }; //老师的结构体定义 struct Teacher {string tName;struct Student sArray[5]; };//给老师和学生赋值的函数…
阅读更多...
用vite创建Vue3项目的步骤和文件解释

用vite创建Vue3项目的步骤和文件解释

创建项目的原则是不能出现中文和特殊字符&#xff0c;最好为小写字母&#xff0c;数字&#xff0c;下划线组成 之后在visual studio code 中打开创建的这个项目 src是源代码文件 vite和webpack是有去别的&#xff0c;对于这个vite创建的工程来说index.js是入口文件 在终端里面输…
阅读更多...
microblaze时钟更改出现时序问题

microblaze时钟更改出现时序问题

在使用microblaze时&#xff0c;我给的时钟是200MHz的时钟&#xff0c;但会在跑布线的时候出现时序上的问题&#xff0c;一开始是没有任何的头绪&#xff0c;知道我尝试更改时钟的频率才发现问题的所在。 当我把200MHz的时钟改为100MHz的时钟时&#xff0c;就不会出现时序上的…
阅读更多...
nodejs实现文件的分片写入和读取

nodejs实现文件的分片写入和读取

&#xff08;1&#xff09;创建 test.cjs 文件 &#xff08;2&#xff09;代码 const {readFileSync,writeFileSync} require(fs); const {dirname} require(path); const chunkSize 1024 * 8; // 切片大小 const path C:\\Users\\cat\\De…
阅读更多...
如何查询并下载韩国签证

如何查询并下载韩国签证

登录大韩民国签证门户网站&#xff08;https://www.visa.go.kr&#xff09;&#xff0c;点击“查询/签发”- “办理进度查询及打印”。 2) 输入护照号码、英文姓名及出生日期后点击查询。 3) 若签证通过&#xff0c;办理状态信息栏下面会显示签证信息。 4&#xff09;点击“签证…
阅读更多...
man手册的安装和使用

man手册的安装和使用

man手册 - HQ 文章目录 man手册 - HQ[toc]man手册的使用Linux man中文手册安装man中文手册通过安装包安装通过apt安装 配置man中文手册README使用说明配置步骤 man手册的使用 首先man分为八个目录&#xff0c;每个目录用一个数字表示 1.可执行程序2.系统调用3.库函数4.特殊文…
阅读更多...
【吊打面试官系列-MyBatis面试题】简述 Mybatis 的插件运行原理，以及如何编写一个插件?

【吊打面试官系列-MyBatis面试题】简述 Mybatis 的插件运行原理，以及如何编写一个插件?

大家好&#xff0c;我是锋哥。今天分享关于 【简述 Mybatis 的插件运行原理&#xff0c;以及如何编写一个插件?】面试题&#xff0c;希望对大家有帮助&#xff1b; 简述 Mybatis 的插件运行原理&#xff0c;以及如何编写一个插件? Mybatis 仅可以编写针对 ParameterHandler、…
阅读更多...
【单片机毕业设计选题24053】-基于单片机的WiFi控制门禁系统设计

【单片机毕业设计选题24053】-基于单片机的WiFi控制门禁系统设计

系统功能: 系统上电后OLED显示智能门禁系统 Door:xxxxxx 初始化ESP8266完成后显示 Door:Closed 短按按键SW4可打开电磁锁OLED显示Door:Open&#xff0c;约五秒后电磁锁自动关闭OLED 显示Door:Closed 根据“TCP调试助手使用说明”操作&#xff0c; 在调试助手界面发送Open后…
阅读更多...
Backend - C# 操作PostgreSQL DB

Backend - C# 操作PostgreSQL DB

目录 一、安装 Npgsql 插件 &#xff08;一&#xff09;作用 &#xff08;二&#xff09;操作 &#xff08;三&#xff09;注意 二、操作类 &#xff08;一&#xff09;操作类 1.NpgsqlConnection类 &#xff08;1&#xff09;作用 &#xff08;2&#xff09;引入 &a…
阅读更多...
gltf模型旋转

gltf模型旋转

const loader new GLTFloader()loader.load(cars.gltf,(gltf) > {scene.add(gltf.scene)let angle 0function animate() {requestAnimateFrame(animate)angle 0.01//0.01是旋转速度gltf.scene.rotation.y anglerenderer.render(scene, camera)}animate()} ) 效果如下&a…
阅读更多...
【centos 7.6 进入单用户模式】

【centos 7.6 进入单用户模式】

1、重启服务器&#xff0c;按e进入编辑模式 将“RO”改成 rw ,删除 rhgb quiet&#xff0c;添加 init/bin/bash 2、Ctrl X 进入单用户模式 防止乱码&#xff0c;修改语言为英语 3、修改完密码建议输入&#xff1a;touch /.autorelabel 更新系统信息&#xff08;(此命令在/下…
阅读更多...
完全可以媲美Navicat的DBeaver介绍！！

完全可以媲美Navicat的DBeaver介绍！！

DBeaver 最新激活应用&#xff0c;亲测可用&#xff01;&#xff01;快来试试&#xff01;&#xff01;简介DBeaver是一种通用数据库管理工具&#xff0c;适用于需要以专业方式使用数据的每个人&#xff1b;适用于开发人员&#xff0c;数据库管理员https://mp.weixin.qq.com/s/…
阅读更多...
Jetson-AGX-Orin多网卡绑定网卡名

Jetson-AGX-Orin多网卡绑定网卡名

Jetson-AGX-Orin多网卡绑定网卡名 ​ Jetson-AGX-Orin当通过USB接口或者Type-C口插入网卡设备后&#xff0c;重新上电Orin设备后&#xff0c;网卡设备的网卡名与Orin本身的以太网网卡名会发生交换。导致两个网卡设备配置发生错乱&#xff0c;两个网卡都将不通。 可以通过将网…
阅读更多...
【Unity2D 2022：NPC】制作NPC

【Unity2D 2022：NPC】制作NPC

一、创建NPC角色 1. 创建JambiNPC并同时创建Jambi站立动画 &#xff08;1&#xff09;点击第一张图片&#xff0c;按住shift不松&#xff0c;再选中后两张图片&#xff0c;拖到层级面板中 &#xff08;2&#xff09;将动画资源文件保存到Animation Clips文件夹中 &#xff08;…
阅读更多...
JVM垃圾回收器详解

JVM垃圾回收器详解

垃圾回收器 JDK 默认垃圾收集器&#xff08;使用 java -XX:PrintCommandLineFlags -version 命令查看&#xff09;&#xff1a; JDK 8&#xff1a;Parallel Scavenge&#xff08;新生代&#xff09; Parallel Old&#xff08;老年代&#xff09; JDK 9 ~ JDK20: G1 堆内存中…
阅读更多...
如何将HEVC格式的视频转换为无损、未压缩的MP4格式视频？

如何将HEVC格式的视频转换为无损、未压缩的MP4格式视频？

在和大家分享视频格式转换之前&#xff0c;先跟大家分享一下HEVC格式的视频到底是什么文件&#xff1f;压缩原理是什么&#xff1f;了解了它的本质之后&#xff0c;我们就可以知道如何保证视频高清无损了。 如何将HEVC格式的视频转换为无损、未压缩的MP4格式视频&#xff1f; …
阅读更多...
Sora模型：释放创意产业文本到视频AI的潜力

Sora模型：释放创意产业文本到视频AI的潜力

Sora&#xff0c;这个由OpenAI在2024年推出的文本到视频生成模型&#xff0c;不仅能够将文字描述转化为生动的视频内容&#xff0c;而且还能保持视频一分钟之久的连贯性和高质量&#xff0c;这在之前是难以想象的。 尽管AI在图像和文本理解上已取得巨大进步&#xff0c;但将这…
阅读更多...
捷配PCB 6个PCB板材关键参数解读技巧

捷配PCB 6个PCB板材关键参数解读技巧

PCB板材是指覆铜基板&#xff0c;是制造电路板的最主要材料。 板材的一些关键性能参数对电路板的生产加工、元器件贴装焊接、电子产品的功能实现以及产品的使用环境或寿命等都将产生一定程度的影响&#xff0c;所以掌握板材的关键参数在实际应用中非常有必要。 PCB板材的关键性…
阅读更多...
最新文章

Copyright @ 2022~2023