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://www.mzph.cn/news/869706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7.10号小项目部分说明

总体说明 糖锅小助手 我这次主要对上次糖锅小助手界面添加了一个侧边栏&#xff08;侧边输入框放置了三个按钮&#xff0c;可以跳转到其他ai聊天界面&#xff0c;还可以退出聊天界面回到登录界面&#xff09;和一个日期输入框&#xff08;日期输入框获取时间&#xff0c;根据时…

Ubuntu固定虚拟机的ip地址

1、由于虚拟机网络是桥接&#xff0c;所以ip地址会不停地变化&#xff0c;接下来我们就讲述ip如何固定 2、如果apt安装时报错W: Target CNF (multiverse/cnf/Commands-all) is configured multiple times in /etc/apt/sources.list:10&#xff0c; 检查 /etc/apt/sources.list…

分类模型的算法性能评价

一、概述 分类模型是机器学习中一种最常见的问题模型&#xff0c;在许多问题场景中有着广泛的运用&#xff0c;是模式识别问题中一种主要的实现手段。分类问题概况起来就是&#xff0c;对一堆高度抽象了的样本&#xff0c;由经验标定了每个样本所属的实际类别&#xff0c;由特定…

Type-C/DP1.4到HDMI2.0替代龙讯LT8711HE,集睿智远CS5262

NCS8622是一款高性能低功耗的Type-C/DP1.4到HDMI2.0转换器&#xff0c;设计为连接USB Type-C源或DP1.4源到HDMI2.0。 NCS8622集成了符合DP1.4标准的接收器&#xff0c;以及符合HDMI2.0标准的发射器。此外&#xff0c;CC控制器用于将CC通信到实现DP Alt模式。DP接收器集成了HDCP…

什么是数据同步服务RSYNC?

大家好呀&#xff01;这里是码农后端。今天来介绍一下数据同步服务RSYNC&#xff0c;作为Linux/Unix系统中远程或本地复制同步&#xff08;复制&#xff09;文件和目录最常用的命令&#xff0c;相比于scp命令&#xff0c;其具有增量备份、数据同步时保持文件的原有属性等优点。…

在Linux上安装和配置RocketMQ:保姆级教程

感谢您阅读本文&#xff0c;欢迎“一键三连”。作者定会不负众望&#xff0c;按时按量创作出更优质的内容。 ❤️ 1. 毕业设计专栏&#xff0c;毕业季咱们不慌&#xff0c;上千款毕业设计等你来选。 当安装RocketMQ时&#xff0c;确保遵循以下步骤&#xff1a; 步骤概述 安装 …

flask模块化、封装使用缓存cache(flask_caching)

1.安装flask_caching库 pip install flask_caching 2.创建utils Python 软件包以及cache_helper.py 2.1cache_helper.py代码 from flask_caching import Cachecache Cache()class CacheHelper:def __init__(self, app, config):cache.init_app(app, config)staticmethoddef…

基于swagger插件的方式推送接口文档至torna

目录 一、前言二、登录torna三、创建/选择空间四、创建/选择项目五、创建/选择应用六、获取应用的token七、服务推送7.1 引入maven依赖7.2 test下面按照如下方式新建文件 一、前言 Torna作为一款企业级文档管理系统&#xff0c;支持了很多种接口文档的推送方式。官方比较推荐的…

防火墙安全策略与用户认证综合实验

一、实验拓扑 二、实验需求 1.DMZ区内的服务器&#xff0c;办公区仅能在办公时间内<9:00-18:00>可以访问&#xff0c;生产区的设备全天可以访问 2.办公区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3.办公区设备10.0.2.10不充许访问DMZ区的FTP服务器和HT…

【java计算机毕设】个人理财管理系统MySQL springboot html maven小组设计项目源码代码

目录 1项目功能 2项目介绍 3项目地址 1项目功能 【java计算机毕设】个人理财管理系统MySQL springboot html maven小组设计项目源码代码 2项目介绍 系统功能&#xff1a; 个人理财管理系统包括管理员、用户两种角色。 管理员功能&#xff1a; 用户信息管理&#xff08;…

ns3学习笔记(四):路由概述

基于官网文档的 Routing Overview 部分详细研究一下ns3中路由是怎么工作的 文档链接16.4. Routing overview — Model Library 一、概述 NS3整体的工作架构如下&#xff1a; 路由部分的工作架构如下&#xff1a; 路由部分目前大多数用到的算法都包含在Ipv4RoutingProtocol部分…

将格内多行文字展开成多格

表格的A列是分类&#xff0c;B列由多行文字组成&#xff0c;即分隔符是换行符。 AB1Account NumberInteraction21Jan 1,2023 - Hello.32Jan 2, 2023 - Good morning. Jan 3, 2023 - Good night. Jan 4, 20 Jan 5, 2023 - Good night. Jan 6, 2023 - Good afternoon.43Jan 1,20…

基于Java技术的网上图书商城系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术、SpringBoot框架 工具&#xff1a;Eclipse、Navicat、Maven 系统展示 首页 用户注册界面…

1996-2023年各省农村居民人均消费支出数据(无缺失)

1996-2023年各省农村居民人均消费支出数据&#xff08;无缺失&#xff09; 1、时间&#xff1a;1996-2023年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;农村居民人均消费支出 4、范围&#xff1a;31省 5、缺失情况&#xff1a;无缺失 6、指标解释&…

视频汇聚平台EasyCVR设备录像回看请求播放时间和实际时间对不上,是何原因?

安防监控EasyCVR视频汇聚平台可提供多协议&#xff08;RTSP/RTMP/国标GB28181/GAT1400/海康Ehome/大华/海康/宇视等SDK&#xff09;的设备接入、音视频采集、视频转码、处理、分发等服务&#xff0c;系统具备实时监控、云端录像、回看、告警、平台级联以及多视频流格式分发等视…

Java中的公平锁和非公平锁

1、什么是公平锁和非公平锁 公平锁和非公平锁是指在多线程环境下&#xff0c;如何对锁进行获取的顺序和策略的不同。 公平锁是指多个线程按照申请锁的顺序来获取锁&#xff0c;即先到先得的策略。当一个线程释放锁之后&#xff0c;等待时间最长的线程将获得锁。公平锁的优点是保…

Redis主从部署

文章目录 Redis主从部署1.下载安装Redis2.单点双副本主从配置1.修改配置信息2.修改配置文件redis.conf3.拷贝配置文件到每一个实例文件夹里4.修改每一个实例的端口和工作目录5.配置主从关系6.检查效果 3.哨兵模式监控主从1.创建实例目录2.复制配置文件并进行修改3.启动并测试 4…

微信定时推送LeetCode每日一题,再也不怕没人喊你刷题了

前段时间发过一篇关于微信机器人开发的文章&#xff0c;讲述了如何快速开发一个微信机器人&#xff0c;本篇文章就来实现一个最近开发的一个功能案例&#xff0c;在这个案例中会遇到了各种问题&#xff0c;可以帮助大家减少自己去踩坑的时间。通过此案例也可以帮助你去扩想一些…

Profibus_DP转ModbusTCP网关模块连马保与上位机通讯

Profibus转ModbusTCP网关模块&#xff08;XD-ETHPB20&#xff09;广泛应用于工业自动化领域。例如&#xff0c;可以将Profibus网络中的传感器数据转换为ModbusTCP协议&#xff0c;实现数据的实时监控和远程控制。本文介绍了如何利用Profibus转ModbusTCP网关&#xff08;XD-ETHP…

【AMBA】AHB总线中的HTRANS、HSIZE、HBURST以及1K边界问题

HTRANS、HSIZE和HBURST共同决定下一次数据传输的地址。 HTRANS[1:0]定义传输类型 HTRANS[1:0]主机传输状态描述00IDLE空闲表示没有进行数据传输&#xff0c;默认状态。主设备虽然可能已经占用了总线&#xff0c;但是还没有开始传输数据。从设备需要返回OKAY响应01BUSY忙主设备…