原生js实现放大镜效果

最新推荐文章于 2023-03-31 13:39:30 发布

布朗狗熊

最新推荐文章于 2023-03-31 13:39:30 发布

阅读量238

点赞数

分类专栏： JavaScript CSS HTML

本文链接：https://blog.csdn.net/weixin_40196539/article/details/99685823

版权

JavaScript 同时被 3 个专栏收录

39 篇文章 4 订阅

订阅专栏

HTML

30 篇文章 0 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

下面是用到的图片
在这里插入图片描述

下面是html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*body{padding: 0;margin: 0;}*/
			img{display: block;border: none;}
			#zoomBox{
				position: relative;
				width: 400px;
				height: 500px;
				border:1px solid #ccc;
			}
			#midArea{
				width: 400px;
				height: 400px;
				position: absolute;
				overflow: hidden;
			}
			#midArea img{
				width: 400px;
				height: 400px;
			}
			#zoom{
				width: 200px;
				height: 200px;
				position: absolute;
				background:yellow;
				opacity: 0.5;
				display: none;
				cursor: move;
			}
			#bigArea{
				display: none;
				width: 400px;
				height: 400px;
				border:1px solid #eee;
				overflow: hidden;
				position: absolute;
				left: 400px;
				top:-1px;
			}
			#bigArea img{
				width: 800px;
				height: 800px;
				position: absolute;
				top: 0;
				left: 0;
			}
			#smallArea{
				height: 80px;
				padding: 10px;
				position: absolute;
				top: 400px;
			}
			#smallArea img{
				float: left;
				margin-left: 10px;
				width: 80px;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<script src="zoom.js" type="text/javascript" charset="utf-8"></script>
		<div id="zoomBox">
			<div id="midArea">
				<img src="img/m01.jpg"/>
				<div id="zoom"></div>
			</div>
			<div id="bigArea">
				<img src="img/m01.jpg"/>
			</div>
			<div id="smallArea">
				<img src="img/m01.jpg"/>
				<img src="img/m02.jpg"/>
			</div>
		</div>
		<script type="text/javascript">
			var zoom = new Zoom();
		</script>
	</body>
</html>

引用的zoom.js

function $(id){//获取id函数
	return document.getElementById(id);
}
function Zoom(){
	this.zoomBox = $("zoomBox");//获取大盒子div
	this.midArea = $("midArea");//获取中部区域div
	this.midImg = this.midArea.children[0];//获取div的图片
	this.zoom = $("zoom");//获取放大镜
	this.bigArea = $("bigArea");//获取放大区域div
	this.bigImg = this.bigArea.children[0];//获取放大区域的图片
	this.smallArea = $("smallArea");//获取缩略图的div
	this.smallImgs = this.smallArea.children;//获取缩略图的图片
	this.init();//init函数直接运行
	this.move();//move函数执行
	this.change();//change函数执行
}
//鼠标移入中部函数
Zoom.prototype.init = function(){
	this.midArea.onmouseover = ()=>{//鼠标移入放大镜显示和放大区域显示
		this.zoom.style.display = "block";
		this.bigArea.style.display = "block";
	}
	this.midArea.onmouseout = ()=>{//鼠标移走隐藏
		this.zoom.style.display = "none";
		this.bigArea.style.display = "none";
	}
}

//放大镜移动函数
Zoom.prototype.move = function(){
	this.midArea.onmousemove = (e)=>{//鼠标移入中部时
		e = e || event;
		//取得放大镜的中间坐标
		var x = e.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth/2;
		var y = e.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight/2;
		
		x = x < 0 ? 0 : x > this.midArea.clientWidth - this.zoom.offsetWidth ? this.midArea.clientWidth- this.zoom.offsetWidth : x;
		y = y < 0 ? 0 : y > this.midArea.clientHeight- this.zoom.offsetHeight ? this.midArea.clientHeight- this.zoom.offsetHeight : y;
		//放大镜定位的范围
		this.zoom.style.left = x + "px";
		this.zoom.style.top = y + "px";  
		
		//大图的left和top 比例相同
		this.bigImg.style.left = -this.zoom.offsetLeft/this.midArea.offsetWidth*this.bigImg.offsetWidth + "px";
		this.bigImg.style.top = -this.zoom.offsetTop/this.midArea.offsetHeight*this.bigImg.offsetHeight + "px";
	}
}

//缩略图改变
Zoom.prototype.change = function(){
	for(let i = 0;i < this.smallImgs.length; i++){//遍历缩略图
		this.smallImgs[i].onclick = ()=>{//添加点击事件
			this.midImg.src = this.smallImgs[i].src;
			this.bigImg.src = this.smallImgs[i].src;
		}
	}
}

布朗狗熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现放大镜效果

下面是用到的图片下面是html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*body{padding: 0;margin: 0;}*/ i...
复制链接

扫一扫