[HTML/JS]用HTML、JS实现放大图片效果（放大镜）

购物软件普遍自带的商品放大镜可以让卖家浏览商品细节，当使用者的鼠标移动时，放大镜也随之移动，想要自己实现如下。

具体效果及代码如下：

京东

苏宁

代码如下：

样式部分

//display:none使“放大镜框”和放大图在卖家想查看之前隐藏

body {margin: 0;}.bigbox {/* background-color: rgb(233, 44, 44); */width: 1300px;height: 900px;position: relative;}.box1 {background-color: gray;width: 398px;height: 398px;position: absolute;left: 110px;top: 175px;border: solid 1px black;}.box2 {background-color: rgb(247, 211, 0.5, 0.5);width: 250px;height: 250px;position: absolute;left: 0px;top: 0px;display: none;}.box3 {background-color: red;width: 550px;height: 550px;position: absolute;left: 530px;top: 100px;overflow: hidden;border: solid 1px black;display: none;}.box3 img {position: absolute;left: 0;top: 0;}

主体部分

bigbox:这个区域的背景

box1:缩略图

box2:“放大镜的框”

box3:放大后的图

img1:小图

img2:大图

<div class="bigbox"><div class="box1"><img src="./images/1.png" class="img1"><div class="box2"></div></div><div class="box3"><img src="./images/2.jpg" class="img2"></div></div>

JS部分

<script>var box1 = document.querySelector('.box1');var box2 = document.querySelector('.box2');var box3 = document.querySelector('.box3');var img2 = document.querySelector('.img2');box1.onmouseenter = function () {box2.style.display = 'block';box3.style.display = 'block';}box1.onmouseleave = function () {box2.style.display = 'none';box3.style.display = 'none';}box1.onmousemove = function () {var x = event.clientX - box1.offsetLeft;var y = event.clientY - box1.offsetTop;var box2X = x - box2.offsetWidth / 2var box2Y = y - box2.offsetHeight / 2if (box2X < 0) {box2X = 0;} else if (box2X > box1.offsetWidth - box2.offsetWidth) {box2X = box1.offsetWidth - box2.offsetWidth}if (box2Y < 0) {box2Y = 0;} else if (box2Y > box1.offsetHeight - box2.offsetHeight) {box2Y = box1.offsetHeight - box2.offsetHeight}box2.style.left = box2X + 'px';box2.style.top = box2Y + 'px';var b = (img2.offsetHeight - box3.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)img2.style.left = -box2X * b + "px"img2.style.top = -box2Y * b + "px"}</script>

//获取所需节点

var box1 = document.querySelector('.box1');

var box2 = document.querySelector('.box2');

var box3 = document.querySelector('.box3');

var img2 = document.querySelector('.img2');

//为右侧缩略图添加鼠标移入事件

box1.onmouseenter = function () {

//跟随鼠标在缩略图中移动的”放大镜框“，放大后的细节图

//二者在鼠标移入缩略图后显现

box2.style.display = 'block';

box3.style.display = 'block';

}

//为缩略图添加鼠标移出事件

//移出缩略图后消失

box1.onmouseleave = function () {

box2.style.display = 'none';

box3.style.display = 'none';

}

//为缩略图添加鼠标移动事件

box1.onmousemove = function () {

//鼠标在显示窗口中的坐标-缩略图在显示窗口中的坐标=鼠标在缩略图中的坐标

var x = event.clientX - box1.offsetLeft;

var y = event.clientY - box1.offsetTop;

//使“放大镜框”跟随鼠标（将鼠标在缩略图中的坐标赋给“放大镜框”中心的坐标）

var box2X = x - box2.offsetWidth / 2

var box2Y = y - box2.offsetHeight / 2

//使“放大镜框”无法超出缩略图范围，并且当鼠标的X或Y坐标超出“放大镜框”中心能与鼠标重合的范围时，“放大镜框”中心的Y或X坐标依旧跟着鼠标移动的方向增加或减少

box2X = 0;

} else if (box2X > box1.offsetWidth - box2.offsetWidth) {

box2X = box1.offsetWidth - box2.offsetWidth

}

if (box2Y < 0) {

box2Y = 0;

}

else if (box2Y > box1.offsetHeight - box2.offsetHeight) {

box2Y = box1.offsetHeight - box2.offsetHeight

}

//为“放大镜框”坐标赋值

box2.style.left = box2X + 'px';

box2.style.top = box2Y + 'px';

//（大图和小图都是正方形）大图高度-放大图框高度得到大图可移动范围的高，缩略图高度-放大镜框高度得到缩略图可移动范围的高，二者相除得到比例b

var b = (img2.offsetHeight - box3.offsetHeight) / (box1.offsetHeight - box2.offsetHeight)

//前者的坐标乘比例后的值赋给大图，即可让大图显示的位置与缩略图（小图）相同

img2.style.left = -box2X * b + "px"

img2.style.top = -box2Y * b + "px"

}

</script>

实现效果

[HTML/JS]用HTML、JS实现放大图片效果（放大镜）相关推荐

Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
在网页广告栏中经常看到左右来回移动的广告图片。请使用html+js实现一个左右移动的图片效果。图片自选。
在网页广告栏中经常看到左右来回移动的广告图片.请使用html+js实现一个左右移动的图片效果.图片自选. <!DOCTYPE html> <html><head>& ...
JavaScript实现的放大镜放大图片效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
【SwiftUI模块】0012、SwiftUI-搭建一个类似微博、网易云、抖音个人页面的头部下拉放大图片效果
SwiftUI模块系列 - 已更新11篇 SwiftUI项目 - 已更新1个项目往期Demo源码下载技术:SwiftUI.SwiftUI3.0.下拉放大.tableview粘性头部.头部下拉放大图 ...
利用html5中canvas实现类似淘宝的放大图片效果
<!DOCTYPE html> <html> <head> </head> <body> <!-- 这里定义原始图片,设置鼠标移动到图 ...
微信浏览器移动端禁止图片放大图片效果
解决第三方网页在微信浏览器中点击图片自动放大,因为微信Android客户端已经在底层支持img标签自动放大功能: 传统方式: $(document).on('click', 'img', e => ...
用js实现高清放大图片效果
var box = my$("box");var small = box.children[0];var big = box.children[1];var mask = smal ...
纯js实现点击预览图片效果
效果如图所示具体实现如下 //点击放大 function clickImg(){var lis=document.getElementById('imgList').getElementsByTag ...
android 照片点击查看,Android PhotoView点击放大图片效果
使用的PhotoView是这个版本的,比较小巧,很好用,比github上另一个版本的瘦身很多:https://github.com/bm-x/PhotoView 基本测试代码如下:import jav ...

[HTML/JS]用HTML、JS实现放大图片效果（放大镜）

[HTML/JS]用HTML、JS实现放大图片效果（放大镜）相关推荐

最新文章

热门文章