放大镜效果

Posted 2020-10-24 carol72

html

<div id="div1">
	<img src="img/big.jpg"/>
	<span></span>
	<div class="mark"></div>
</div>
<div id="div2">
	<img src="img/big.jpg"/>
</div>

CSS

#div1{
	width: 400px;
	height: 200px;
	overflow: hidden;
	position: relative;
}
#div1 img{
	width: 100%;
	height: 100%;
}
.mark{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: transparent;
}
#div1 span{
	position: absolute;
	width: 100px;
	height: 100px;
	background: yellow;
	opacity: 0.5;
	filter: alpha(opacity=50);
	left: 0;
	top: 0;
	display: none;
	z-index: 9999;
}
#div2{
	width: 300px;
	height: 300px;
	margin-top: 20px;
	display: none;
	overflow: hidden;
	position: relative;
}
#div2 img{
	width: 800px;
	height: 400px;
	position: absolute;
}

JS

//span抖动闪现
//1.js:onmouseenter/onmouseleave
//最早ie firefox chrome,做兼容非常的麻烦
//css：加一个曾
var oDiv=document.getElementById(‘div1‘);
var oDiv1=document.getElementById(‘div2‘);
var oSpan=oDiv.getElementsByTagName(‘span‘)[0];
var oImg=oDiv1.getElementsByTagName(‘img‘)[0];

oDiv.onmouseover=function(){
	oSpan.style.display=‘block‘;
	oDiv1.style.display=‘block‘;
};
oDiv.onmouseout=function(){
	oSpan.style.display=‘none‘;
	oDiv1.style.display=‘none‘;
};
oDiv.onmousemove=function(ev){
	var ev=ev||event;
	
	var disX=ev.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2;
	var disY=ev.clientY-oDiv.offsetTop-oSpan.offsetHeight/2;
	
	//限制范围
	//左右
	if(disX<0){
		disX=0;
	}else if(disX>oDiv.clientWidth-oSpan.offsetWidth){
		disX=oDiv.clientWidth-oSpan.offsetWidth;
	}
	//上下
	if(disY<0){
		disY=0;
	}else if(disY>oDiv.clientHeight-oSpan.clientHeight){
		disY=oDiv.clientHeight-oSpan.clientHeight;
	}
	
	oSpan.style.left=disX+‘px‘;
	oSpan.style.top=disY+‘px‘;
	
	//比例
	var scaleX=disX/(oDiv.clientWidth-oSpan.offsetWidth);
	var scaleY=disY/(oDiv.clientHeight-oSpan.clientHeight);
	
	oImg.style.left=-(oImg.offsetWidth-oDiv1.offsetWidth)*scaleX+‘px‘;
	oImg.style.top=-(oImg.offsetHeight-oDiv1.offsetHeight)*scaleY+‘px‘;
}