标签：
原理：放大的图片实际上是一张大图；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
}
#left {
width: 430px;
height: 430px;
}
#left:hover {
cursor: pointer;
}
#buttom {
margin-top: 10px;
width: 430px;
height: 60px;
}
#buttom div {
float: left;
margin-right: 8px;
}
#buttom img:hover {
cursor: pointer;
border: 2px solid blue;
}
#right {
width: 430px;
height: 430px;
position: absolute;
top: 0;
left: 440px;
overflow: hidden;
display: none;
}
</style>
<script>
window.onload = function() {
var left = document.getElementById("left");
var buttom = document.getElementById("buttom");
var right = document.getElementById("right");
buttom.onmouseover = function(e) {
var ev = e || window.event;
var obj = ev.target || ev.srcElement;
if(obj.nodeName == "IMG") {
var objImg = obj.src.substring(obj.src.lastIndexOf("/")).replace("1", "2");
left.innerHTML = "<img src=‘./图片放大图片" + objImg + "‘/>";
}
};
left.onmouseover = function(e) {
var ev = e || window.event;
var obj = ev.target || ev.srcElement;
if(obj.nodeName == "IMG") {
console.log(obj.src);
var objImg = obj.src.substring(obj.src.lastIndexOf("/")).replace("2", "3");
right.innerHTML = "<img src=‘./图片放大图片" + objImg + "‘/>";
right.style.display = "block";
}
var imgObj = right.getElementsByTagName("img")[0];
imgObj.style.position = "absolute";
imgObj.style.top = "0";
imgObj.style.left = "0";
this.onmousemove = function(e) {
var ev = e || window.event;
var ox = ev.offsetX;
var oy = ev.offsetY;
imgObj.style.left = -ox / this.offsetWidth * (imgObj.offsetWidth - right.offsetWidth) + "px";
imgObj.style.top = -oy / this.offsetHeight * (imgObj.offsetHeight - right.offsetHeight) + "px"
}
};
left.onmouseout = function() {
right.style.display = "none";
};
}
</script>
</head>
<body>
<div id="wrap">
<div id="left">
<img src="./图片放大图片/imgA_2.jpg" />
</div>
<div id="buttom">
<div><img src="./图片放大图片/imgA_1.jpg" /></div>
<div><img src="./图片放大图片/imgB_1.jpg" /></div>
<div><img src="./图片放大图片/imgC_1.jpg" /></div>
<div><img src="./图片放大图片/imgD_1.jpg" /></div>
</div>
<div id="right"></div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lidongrain/p/5004697.html
