<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box{width: 1000px;height: 600px;border:1px solid #ccc;margin:50px auto;}
.small{float: left;width: 300px;height: 300px;border:1px solid #000;position: relative;}
.big{float: left;width: 300px;height: 300px;overflow: hidden;border:1px solid #eee;margin-left:80px;margin-top:30px;display: none;position: relative;}
.mark{position: absolute;width: 80px;height: 80px;background:yellow;opacity: 0.6;left:0;top:0;display: none}
.big img{position: absolute;}
</style>
</head>
<body>
<div class = "Box"> // outermost big box
<div class = "small"> // small picture box small image size = small picture box size
<img src = "1.jpg"> // small pictures
<div class = "mark"> </ div> // small picture magnifying glass
</ div>
<div class = "big"> // large picture box
<img src = "2.jpg"> // big picture
</ div>
</ div>
<Script type = "text / JavaScript">
var document.querySelector Box = ( "Box.")
var = document.querySelector Small ( "Small.");
var = Big document.querySelector ( ".big");
var bigimg big.children = [0];
var mark = document.querySelector(".mark")
small.onmouseover = function () {// mouse over small picture box, display magnifier and right big box
mark.style.display = "Block";
big.style.display = "Block";
}
small.onmouseout = function () {// mouse out small picture box, hidden magnifier and right big box
mark.style.display = "none";
big.style.display = "none";
}
= function small.onmousemove (EVT) {
// the mouse in the center of the box
var X = evt.clientX - box.offsetLeft - mark.offsetWidth / 2;
var Y = evt.clientY - box.offsetTop - mark.offsetHeight / 2;
// mark so small magnifying glass is always present inside
IF (X <0) {
X = 0;
} the else IF (X> small.offsetWidth - mark.offsetWidth) {
X = small.offsetWidth - mark.offsetWidth;
}
if(y <0 ){
y=0;
}else if (y > small.offsetHeight - mark.offsetHeight){
y = small.offsetHeight - mark.offsetHeight
}
mark.style.left = x + "px";
mark.style.top = y +"px"
= 2 * imgleft the -X-var; // here ratio: a large picture and small picture ratio is 1: 2 ratio between the movement of the moving distance of the magnifier from the big picture is also 1: 2
var imgtop = 2 * -Y ;
// The following code == In order to avoid the big picture will appear in the process of moving a large number of blank
// big picture move to the left if the distance exceeds the width of the box, it will appear a lot of blank
// for example the big picture moves to the left of 500px (left: -500px), this time the size of the box is 400px, appears a lot of blank
IF (imgleft <-big.offsetWidth) { // (- 500 <-400) == always moves left -400
imgleft = -big.offsetWidth;
} the else {
imgleft = imgleft;
}
if(imgtop < -big.offsetHeight){
imgtop = -big.offsetHeight;
}else{
imgtop =imgtop;
}
bigimg.style.left = imgleft + "px"; // big picture moving coordinate
bigimg.style.top = imgtop + "px";
}
</script>
</body>
</html>
to sum up:
1. Several events
onmouseover == move mouse on time
onmouseout == mouse out of time
onmousemove == mouse movement
file: /// E: /% E6% 9E% 97% E9% 9C% 9C% E9% 9B% AAJS / all% E7% BB% 83% E4% B9% A0ppt /% E6% 94% BE% E5% A4% A7% E9% 95% 9C.html