效果图

wKiom1hSOZihm70rAAD5cpNKPZQ571.png-wh_50

wKioL1hSOZmy3IgCAAJ2L22_kNo089.png-wh_50

代码部分

html:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>放大镜</title>

</head>

<body>

<div id="container">

<!-- 原图层容器 -->

<div id="small-container">

<div id="mark"></div>

<div id="float-container"></div>

<img src="macbook-small.jpg" alt="">

</div>


<!-- 大图层容器 -->

<div id="big-container">

<img src="macbook-big.jpg" alt="">

</div>

</div>

</body>

</html>


css样式:

<style>

/*

最外层容器id=container

*/

#container{

display: block;

width: 400px;

height: 400px;

margin: 50px;

position: relative;

border: 1px solid #ccc;

}


/*

原图容器id=small-container

*/

#small-container{

position: relative;

z-index: 1;

}


/*

原图上的图层id=mark

*/

#mark{

position: absolute;

display: block;

width: 400px;

height: 400px;

background-color: #FFF;

opacity: 0;

z-index: 2;

cursor: move;

}


/*

原图上的移动图层id=float-container

*/

#float-container{

display: none;

width: 200px;

height: 200px;

position: absolute;

background-color: #F5F5DC;

border: 1px solid #ccc;

filter:alpha(opacity=50);

opacity: 0.5;

}


/*

大图容器id=big-container

*/

#big-container{

display: none;

position: absolute;

top: 0;

left: 420px;

width: 460px;

height: 460px;

overflow: hidden;

border: 1px solid #ccc;

z-index: 1;

}


/*

大图片

*/

#big-container img{

position: absolute;

z-index: 2;

}

</style>


javascript脚本:

<script>

window.onload = function (){

var objContainer = document.getElementById("container");//获取最外层的容器对象

var objSmallContainer = document.getElementById("small-container");//获取原始图的容器对象

var objMark = document.getElementById("mark");//获取原始图上的标记图层对象

var objFloatContainer = document.getElementById("float-container");//获取原始图上的可移动图层对象

var objBigContainer = document.getElementById("big-container");//获取大图的容器对象

var objBigContainerImage = objBigContainer.getElementsByTagName("img")[0];//获取大图对象


//原始图上的标记图层的鼠标移入事件

objMark. = function (){

objFloatContainer.style.display = "block";//将原始图上的可移动图层对象的样式设置为可见

objBigContainer.style.display = "block";//将大图的容器对象的样式设置为可见

}


//原始图上的标记图层的鼠标移出事件

objMark. = function (){

objFloatContainer.style.display = "none";//将原始图上的可移动图层对象的样式设置为不可见

objBigContainer.style.display = "none";//将大图的容器对象样式设置为不可见

}


//原始图上的标记图层的移动事件

objMark. = function (ev){

//兼容多个浏览器的event参数模式

var _event = ev || window.event;


var clientX = _event.clientX;//获取鼠标的X轴坐标

var clientY = _event.clientY;//获取鼠标的Y轴坐标

var objContainerOffSetLeft = objContainer.offsetLeft;//获取最外层对象距离左边的距离

var objContainerOffSetTop = objContainer.offsetTop;//获取最外层对象距离上边的距离


var objMarkWidth = objMark.offsetWidth;//获取原始图上的标记图层对象的宽度

var objMarkHeight = objMark.offsetHeight;//获取原始图上的标记图层对象的高度


var objSmallContainerOffSetLeft = objSmallContainer.offsetLeft;//获取原始图上的标记图层对象距离左边的距离

var objSmallContainerOffSetTop = objSmallContainer.offsetTop;//获取原始图上的标记图层对象距离上边的距离


var objFloatContainerOffSetWidth = objFloatContainer.offsetWidth;//获取原始图上的可移动图层对象的宽度

var objFloatContainerOffSetHeight = objFloatContainer.offsetHeight;//获取原始图上的可移动图层对象的高度


var objBigContainerWidth = objBigContainer.offsetWidth;//获取大图的容器对象的宽度

var objBigContainerHeight = objBigContainer.offsetHeight;//获取大图的容器对象的高度


var objBigContainerImageWidth = objBigContainerImage.offsetWidth;//获取大图对象的宽度

var objBigContainerImageHeight = objBigContainerImage.offsetHeight;//获取大图对象的高度


var left = clientX - objContainerOffSetLeft - objSmallContainerOffSetLeft - objFloatContainerOffSetWidth / 2;

var top = clientY - objContainerOffSetTop - objSmallContainerOffSetTop - objFloatContainerOffSetHeight / 2;


if (left < 0) {

left = 0;

} else if(left > (objMarkWidth - objFloatContainerOffSetWidth)){

left = objMarkWidth - objFloatContainerOffSetWidth;

}


if (top < 0) {

top = 0;

} else if(top > (objMarkHeight - objFloatContainerOffSetHeight)){

top = objMarkHeight - objFloatContainerOffSetHeight;

}


objFloatContainer.style.left = left + "px";

objFloatContainer.style.top = top + "px";


var percentX = left / (objMarkWidth - objFloatContainerOffSetWidth);

var percentY = top / (objMarkHeight - objFloatContainerOffSetHeight);


objBigContainerImage.style.left = -percentX * (objBigContainerImageWidth - objBigContainerWidth) + "px";

objBigContainerImage.style.top = -percentY * (objBigContainerImageHeight - objBigContainerHeight) + "px";

}

}

</script>