用原生js实现放大镜功能

html：
由于样式简单，所以将css样式内嵌于html

	<title>放大镜</title>
	<style type="text/css">
		.small{
			width:350px;
			height:350px;
			border:1px solid #999;
			float:left;
			position:relative;
		}
		.small .move{
			border:1px solid #999;
			background:rgba(255,225,0,0.4);
			position:absolute;
			box-sizing:border-box;
			display:none;
		}
		.big{
			width:550px;
			height:550px;
			border:1px solid #999;
			margin-left:8px;
			float:left;
			display:none;
		}
	</style>
</head>
<body>
	<div class="small">
		<div class="move"></div>
	</div>
	<div class="big"></div>
	<script type="text/javascript" src = "./javascript/放大镜.js"></script>

js：

var config = {
	smallBg : "http://img13.360buyimg.com/n1/jfs/t1/59964/8/5482/52239/5d397d35E56518ee9/8b7179acd6e4095f.jpg",
	bigBg : "http://img13.360buyimg.com//n0/jfs/t1/59964/8/5482/52239/5d397d35E56518ee9/8b7179acd6e4095f.jpg",
	smallDiv : document.querySelector(".small"),
	bigDiv : document.querySelector(".big"),
	moveDiv : document.querySelector(".move"),
	smallImgSize : {
		width : 350,
		height : 350
	},
	bigImgSize : {
		width : 550,
		height : 550
	},
	bigDivSize : {
		width : 900,
		height : 900 
	}
};
config.moveDivSize = {
		width : config.bigImgSize.width/config.bigDivSize.width*config.smallImgSize.width,
	    height : config.bigImgSize.height/config.bigDivSize.height*config.smallImgSize.height
};
(function(){
	initDivBg();  //初始化小div背景
	initMouse();  //初始化鼠标移动事件
	initMoveDiv();
	function initMoveDiv(){
		config.moveDiv.style.width = config.moveDivSize.width + "px";
		config.moveDiv.style.height = config.moveDivSize.height + "px"
	}
	//计算可移动的div坐标

	function initDivBg(){
        config.smallDiv.style.background = `url("${config.smallBg}") no-repeat left top/100% 100%`;
        config.bigDiv.style.background = `url("${config.bigBg}")`
	};
	function initMouse(){
		config.smallDiv.onmouseenter = function(){
	        config.moveDiv.style.display = "block";
	        config.bigDiv.style.display = "block";
		};
		config.smallDiv.onmouseleave = function(){
			config.moveDiv.style.display = "none";
			config.bigDiv.style.display = "none";
		};
		config.smallDiv.onmousemove = function(e){
			var move = getOffset(e);
			setOpsition(move);
	        bgPosition();
		}
		function getOffset(e){
			if(e.target === config.smallDiv){
				return {
					x : e.offsetX,
					y : e.offsetY
				}
			}else{
				var style = getComputedStyle(config.moveDiv);
				var left = parseFloat(style.left);
				var top = parseFloat(style.top);
				return {
					x : e.offsetX + left + 1,
					y : e.offsetY + top + 1
				}
			}
		};
		function setOpsition(move){
		    var left = move.x - config.moveDivSize.width/2;
			var top = move.y - config.moveDivSize.height/2;
			if(left < 0){
				left = 0;
			}if( top < 0){
				top = 0;
			}if(left > config.smallImgSize.width - config.moveDivSize.width){
				left = config.bigImgSize.left - config.smallImgSize.left;
			}if(top > config.smallImgSize.height - config.moveDivSize.height){
				top = config.bigImgSize.top - config.smallImgSize.top;
			}
			config.moveDiv.style.left = left + "px";
			config.moveDiv.style.top = top + "px";
	    };	
	    function bgPosition(){
			var style = getComputedStyle(config.moveDiv);
			var left = parseFloat(style.left);
			var top = parseFloat(style.top);
	    	var bgleft = left/config.smallImgSize.width*config.bigImgSize.width;
	    	var bgtop = top/config.smallImgSize.height*config.bigImgSize.height;
	    	config.bigDiv.style.backgroundPosition = `-${bgleft}px -${bgtop}px`;
	    };
	}
}());

用面向对象的思想编写程序。（该程序中所用到的大图小图均来源于京东官网）
运行：
想要对下面图片作放大显示
在这里插入图片描述
（由于截屏隐藏了鼠标箭头，所以手动画了白色箭头上去，方便观察）鼠标箭头始终处于黄色透明框中间位置，随着鼠标移动，黄色透明框也随之移动。右边的大方框也随着左边黄色方框显示对应图片位置的放大效果。这样就实现了放大镜效果了。
在这里插入图片描述

le__seul

原创文章 9 获赞 30 访问量 2266

关注私信

用原生js实现放大镜功能

猜你喜欢