放大镜效果

Posted 2020-08-08 HandsomeHan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了放大镜效果相关的知识，希望对你有一定的参考价值。

放大镜效果（放大的照片需要自己添加）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜效果</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background: #ccc;
	}
	#outer {
		width: 1200px;
		margin: 100px auto 0;
		overflow: hidden;
		padding: 10px;
		position: relative;
	}
	#minbox {
		float: left;
		width: 350px;
		height: 350px;
		/*border: 1px solid red;*/
		position: relative;
	}
	#minbox img {
		width: 350px;
		height: 350px;
	}
	#minbox #shadow {
		height: 175px;
		width: 175px;
		background: yellow;
		opacity: 0.4;
		filter: alpha(opacity = 40);
		position: absolute;
		left: 0;
		top: 0;
		display: none;
	}
	#maxbox {
		height: 400px;
		width: 400px;
		overflow: hidden;
		position: absolute;
		left: 370px;
		top: 20px;
		/*border: 2px solid blue;*/
		display: none;
	}
	#maxbox img {
		height: 800px;
		width: 800px;
		position: absolute;
		left: 0;
		top: 0;
	}
	#con {
		float: left;
		margin-left: 20px;
	}
	</style>
</head>
<body>
	<div id="outer">
		<div id="minbox">
			<img src="images/min.jpg" >
			<p id="shadow"></p>
		</div>
		<div id="maxbox">
			<img src="images/max.jpg" >
		</div>
		<div id="con">
			<img src="images/msg.png" >
		</div>
	</div>
	<script>
		var $ = function(id) {
			return document.getElementById(id);
		}
		//获取元素到body的距离函数
		function offsetTL(obj) {
			var l = 0, t = 0;
			while(obj) {
				l = l + obj.offsetLeft + obj.clientLeft;
				t = t + obj.offsetTop + obj.clientTop;
				obj = obj.offsetParent;
			}
			return {left: l, top: t}
		}
		console.log(offsetTL($(‘minbox‘)).left);
		var minImg = $(‘minbox‘).getElementsByTagName(‘img‘)[0];
		var maxImg = $(‘maxbox‘).getElementsByTagName(‘img‘)[0];
		// console.log(maxImg);
		$(‘minbox‘).onmousemove = function(e) {
			var e = e || window.event;
			$(‘shadow‘).style.display = ‘block‘;
			$(‘maxbox‘).style.display = ‘block‘;
			var movel = (e.clientX - offsetTL($(‘minbox‘)).left - $(‘shadow‘).offsetWidth/2);
			var movet = (e.clientY - offsetTL($(‘minbox‘)).top - $(‘shadow‘).offsetHeight/2);
			if (movel <= 0) {
				movel = 0;
			}else if(movel >= $(‘minbox‘).clientWidth - $(‘shadow‘).offsetWidth) {
				movel = $(‘minbox‘).clientWidth - $(‘shadow‘).offsetWidth;
			}
			if (movet <= 0) {
				movet = 0;
			}else if(movet >= $(‘minbox‘).clientHeight - $(‘shadow‘).offsetHeight) {
				movet = $(‘minbox‘).clientHeight - $(‘shadow‘).offsetHeight;
			}
			$(‘shadow‘).style.left = movel + ‘px‘;
			$(‘shadow‘).style.top = movet + ‘px‘;
			var scale = maxImg.offsetWidth/minImg.offsetWidth;
			maxImg.style.left = -movel * scale + ‘px‘;
			maxImg.style.top = -movet * scale + ‘px‘;
		}
		$(‘minbox‘).onmouseout = function() {
			$(‘shadow‘).style.display = ‘none‘;
			$(‘maxbox‘).style.display = ‘none‘;
		}
	</script>
</body>
</html>

以上是关于放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章