原生js实现图片的放大镜效果

最新推荐文章于 2024-07-10 14:03:37 发布

每一天，每一步

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量156

点赞数

分类专栏： javaScript 文章标签： javascript css html5

本文链接：https://blog.csdn.net/u010234868/article/details/120379629

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 350px;
			height: 350px;
			margin: 100px;
			border: 1px solid #ccc;
			position: relative;
		}
		.big {
			width: 400px;
			height: 400px;
			position: absolute;
			top: 0;
			left: 360px;
			border: 1px solid #ccc;
			overflow: hidden;
			display: none;
		}
		.big img {
			position: absolute;
		}
		.mask {
			width: 175px;
			height: 175px;
			background: rgba(255, 255, 0, 0.4);
			position: absolute;
			top: 0;
			left: 0;
			cursor: move;
			display: none;
		}
		.small {
			position: relative;
		}
	</style>
	<script src="js/common.js"></script>
</head>
<body>
	<div id="box" class="box">
		<div class="small">
			<img src="images/350X350.jpg" alt="">  <!-- .webp格式的图片相同画质，图片体积更小，chrome格式，火狐、IE不支持，淘宝中是服务器端做处理 -->
			<div class="mask"></div>
		</div>
		<div class="big">
			<img src="images/430x430q90.jpg" alt="" width="430">
		</div>
	</div>
	<script>
		var box = my$('box');
		var smallBox = box.children[0];
		var smallImage = smallBox.children[0];
		var maskBox = smallBox.children[1];
		var bigBox = box.children[1];
		var bigImage = bigBox.children[0];

		// 鼠标经过小图片，mask和bigBox显示 
		// 浏览器兼容性问题：onmouseover、onmouseout会触发冒泡，在IE下，鼠标刚进入small区域mask显示会出现闪烁；onmouseenter、onmouseleave不会触发冒泡，IE中不会闪烁
		// box.onmouseover = function () {
		box.onmouseenter = function () {
			maskBox.style.display = 'block';
			bigBox.style.display = 'block';
		}
		// 鼠标离开小图片，mask和bigBox隐藏
		// box.onmouseout = function () {
		box.onmouseleave = function () {
			maskBox.style.display = 'none';
			bigBox.style.display = 'none';
		}
		// 鼠标移动，mask跟着移动
		box.onmousemove = function (e) {
			// 获取鼠标所在位置
			e = e || window.event;
			var maskX = getPage(e).pageX - box.offsetLeft;
			var maskY = getPage(e).pageY - box.offsetTop;
			// 鼠标之所以能在box外面移动是因为事件冒泡，子元素的onmousemove冒泡触发了父元素的onmousemove
			maskX = maskX - maskBox.offsetWidth / 2;
			maskY = maskY - maskBox.offsetHeight / 2;
			// 限制mask在box中
			maskX = maskX < 0 ? 0 : maskX;
			maskY = maskY < 0 ? 0 : maskY;

			maskX = maskX > ( box.offsetWidth - maskBox.offsetWidth ) ? ( box.offsetWidth - maskBox.offsetWidth ) : maskX;
			maskY = maskY > ( box.offsetHeight - maskBox.offsetHeight ) ? ( box.offsetHeight - maskBox.offsetHeight ) : maskY;

			maskBox.style.left = maskX + 'px'; 
			maskBox.style.top = maskY + 'px';

			// 右侧大图bigImage跟着左侧移动
			// mask移动距离maskX、maskY / mask最大移动距离 = bigImage需要移动的距离 / bigImage最大移动距离

			// mask最大移动距离
			var maskMax = box.offsetWidth - maskBox.offsetWidth;
			// bigImage最大移动距离
			var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth;
			var bigImageX = maskX * bigImageMax / maskMax;
			var bigImageY = maskY * bigImageMax / maskMax; //  bigImageMax / maskMax此处只是比例 不需要求Y轴上的

			bigImage.style.left = -bigImageX + 'px'; // 大图向左移动
			bigImage.style.top = -bigImageY + 'px';
		}
	</script>
</body>
</html>

common.js：

// 通过id获取元素
function my$(element) {
	var el = document.getElementById(element);
	return el;
}
// 获取鼠标在页面上的位置，兼容性处理
function getPage(e) { // 传入参数e
	e = e || window.event;
	var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
	var pageY = e.pageY || e.clientY + getScroll().scrollTop;
	return {
		pageX: pageX,
		pageY: pageY
	}
}
// 页面滚动出去的距离兼容性处理
function getScroll() {
	var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	return {
		scrollLeft : scrollLeft,
		scrollTop : scrollTop
	}
}

每一天，每一步

关注

0
点赞
踩
0

收藏

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

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px.
复制链接

扫一扫