放大镜案例 - 爱码网

我们经常在淘宝会看到一些商品的放大镜效果，我们今天也来写一下吧放大镜案例
1、分析
核心：通过鼠标在小图片上的移动，按照一定的比例移动大图片。

2、设计
A.界面元素
小窗口small
大窗口big
放大镜 mask

B.事件与属性
事件:
onmouseover:鼠标指针移到该对象时触发
onmouseout:鼠标指针移出制定对象时触发
onmousemove(event):鼠标移动时触发
属性:
offsetLeft
offsetTop
offsetWidth
offsetHeight
event.clientX
event.clientY
clientX和clientY的坐标是相对于整个页面。
offsetLeft与style.left对比:
style.left返回字符串如20px, offsetLeft返回数值如20
style.left读写,offsetLeft只读
style.left必须要事先定义，否则值为空
分析完接下来我们就开始写了：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#small{
			position: relative;
			width: 200px;
			height: 200px;
			background: url(img/2.jpg) no-repeat;
			background-size: 200px 200px;
			border: 1px solid red;
		}
	</style>
</head>	
<body>
	<div id="small">
		
	</div>
</body>
</html>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
	function bigMirror(obj){
		this.smallDom = obj.smallDom;
		this.bigDom = null;
		this.maskDom = null;
		//给一个默认值
		let defaultObj = {
			multiple:2,
			maskWidth:100,
			maskHeight:100,
			maskOpacity:0.8,
			maskColor:"pink",
			bigImg:getStyle(this.smallDom,"backgroundImage").split(")")[0].substring(4)
		}
		for(let key in defaultObj){
			if(!obj[key]){
				obj[key]=defaultObj[key];
			}
		}
		this.multiple = obj.multiple;
		this.maskWidth = obj.maskWidth;
		this.maskHeight = obj.maskHeight;
		this.maskOpacity = obj.maskOpacity;
		this.maskColor = obj.maskColor;
		this.bigImg = obj.bigImg;
		this.createUI();
		this.addEvent();
	}
	//创建界面
	bigMirror.prototype.createUI = function(){
		this.maskDom = document.createElement("div");
		this.maskDom.style.cssText = `width:${this.maskWidth}px;
						height:${this.maskHeight}px;
						opacity:${this.maskOpacity};
						background:${this.maskColor};
						position:absolute;
						display:none;`;
		this.smallDom.appendChild(this.maskDom);

		this.bigDom = document.createElement("div");
		this.bigDom.style.cssText = `width:${this.maskWidth*this.multiple}px;
						height:${this.maskHeight*this.multiple}px;
						background:url(${this.bigImg}) no-repeat;
						background-size:${this.smallDom.offsetWidth*this.multiple}px ${this.smallDom.offsetHeight*this.multiple}px; 
						position:absolute;
						left:${this.smallDom.offsetWidth+20}px;
						top:0;
						display:none;`;
		this.smallDom.appendChild(this.bigDom);
	}
	//绑定事件
	bigMirror.prototype.addEvent = function(){
		this.smallDom.onmouseover = ()=>{
			this.maskDom.style.display = "block";
			this.bigDom.style.display = "block";
		}

		this.smallDom.onmouseout = ()=>{
			this.maskDom.style.display = "none";
			this.bigDom.style.display = "none";
		}

		this.smallDom.onmousemove = (event)=>{
			let evt = event || window.event;

			 var left1=evt.clientX-this.smallDom.offsetLeft-this.maskDom.offsetWidth/2;
			 var top1=evt.clientY-this.smallDom.offsetTop-this.maskDom.offsetHeight/2;

			 //边界判断
			 if(left1<0){
			 	left1 = 0;
			 }
			 var max = this.smallDom.offsetWidth-this.maskDom.offsetWidth;
			 if(left1>max){
			 	left1 = max;
			 }

			 if(top1<0){
			 	top1 = 0;
			 }
			 if(top1>max){
			 	top1 = max;
			 }
			 //外观呈现
			 this.maskDom.style.left = left1+"px";
			 this.maskDom.style.top = top1+"px";

			 var x = left1*this.multiple;
			 var y = top1*this.multiple;
			 this.bigDom.style.backgroundPositionX = -x + "px";
			 this.bigDom.style.backgroundPositionY = -y + "px";
		}
	}
	window.onload = function(){
		new bigMirror({
			smallDom:document.getElementById("small"),
			multiple:4
		});
	}
</script>