实现图片放大镜效果-优快云博客

本文链接：https://blog.youkuaiyun.com/GUfeifei___/article/details/120405149
1.放大镜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 * {
            margin: 0;
            padding: 0
        }

        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }

        #small-box {
            position: relative;
            z-index: 1;
        }

        #float-box {
            display: none;
            width: 100px;
            height: 100px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }

        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }
		</style>
		
	</head>
	<body>
		<div id="demo">
        <div id="small-box">
            <div id="float-box"></div>
            <img src="322059.jpg" width="400" height="255"/>
        </div>
        
        <div id="big-box">
            <img src="322059.jpg"/>
        </div>
    </div>
	</body>
	<script type="text/javascript">
		//获取元素
 var box = document.getElementById("demo");
 var minbox = document.getElementById("small-box");
 var zhe = document.getElementById("float-box");
 var maxbox = document.getElementById("big-box");
 var maximg = maxbox.getElementsByTagName("img")[0];
//鼠标移入
//minbox 小盒子
// zhe   遮罩层
// maxbox 大盒子
minbox.onmouseover=function(){
	zhe.style.display="block"
	maxbox.style.display="block"
}
//鼠标移出
minbox.onmouseout=function(){
	zhe.style.display="none"
	maxbox.style.display="none"
}
//鼠标移动
minbox.onmousemove=function(e){
     //鼠标指针 在遮罩层中心
	var x=e.clientX-box.offsetLeft-50
	var y=e.clientY-box.offsetTop-50
	// 限制遮罩层范围	
	 if(x<0){
	 	x=0;
	 }else if(x>minbox.offsetWidth-zhe.offsetWidth){
	 	x=minbox.offsetWidth-zhe.offsetWidth
	 }
	 if(y<0){
	 	y=0
	 }else if(y>minbox.offsetHeight-zhe.offsetHeight){
	 	y=minbox.offsetHeight-zhe.offsetHeight
	 }
	 console.log(x)
	//求比列    20/400-100
	var px=x/(minbox.offsetWidth-zhe.offsetWidth)
	var py=y/(minbox.offsetHeight-zhe.offsetHeight)
	//大图移动位置
	//1519-400*0.06
	var boox=(maximg.offsetWidth-maxbox.offsetWidth)*-px;
	var booy=(maximg.offsetHeight-maxbox.offsetHeight)*-py;
	
	maximg.style.left=boox+'px';
	maximg.style.top=booy+'px';
	// 遮罩层赋值
	zhe.style.left=x+'px'
	zhe.style.top=y+'px'
}

	</script>
</html>
js放大镜效果

1.放大镜
