还是用到html还有css,写的非常简单,很容易懂,就不多废话了
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#smallbox {
border: 1px solid #000000;
width: 450px;
height: 450px;
position: absolute;
cursor: pointer;
z-index: 5;
}
#movebox {
display: none;
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
width: 303.75px;
height: 303.75px;
background: yellow;
z-index: 100;
}
#smallimg1 {
height: 450px;
width: 450px;
}
#bigimg {
position: absolute;
left: 0px;
top: 0px;
}
#what {
display: none;
height: 540px;
width: 540px;
overflow: hidden;
position: absolute;
left: 500px;
top: 0px;
}
</style>
<script>
var _left;
var _top;
var myscale;
window.onload = function() {
// myscale=document.getElementById("smallbox").clientWidth/document.getElementById("movebox").clientWidth;
myscale = 1.76;
document.getElementById("smallbox").addEventListener("mousemove", function(evt) {
//先设置快元素的display
document.getElementById("movebox").style.display = "block";
document.getElementById("what").style.display = "block";
var evnt = evt || event;
_left = evnt.clientX - document.getElementById("smallbox").offsetLeft - (document.getElementById("movebox").clientWidth) / 2;
_top = evnt.clientY - document.getElementById("smallbox").offsetTop - (document.getElementById("movebox").clientHeight) / 2;
if(_left < 0) {
_left = 0;
}
if(_left > 147) {
_left = 147;
}
if(_top < 0) {
_top = 0;
}
if(_top > 147) {
_top = 147;
}
movediv(_left, _top, myscale);
console.log(myscale);
});
document.getElementById("smallbox").addEventListener("mouseout", function() {
document.getElementById("movebox").style.display = "none";
document.getElementById("what").style.display = "none";
});
}
function movediv(divleft, divtop, myscale) {
document.getElementById("movebox").style.left = divleft + "px";
document.getElementById("movebox").style.top = divtop + "px";
document.getElementById("bigimg").style.left = -(myscale * divleft) + "px";
document.getElementById("bigimg").style.top = -(myscale * divtop) + "px";
}
</script>
</head>
<body>
</body>
<div id="smallbox">
<div id="smallimg">
<a href="#">
<img id="smallimg1" src="http://img10.360buyimg.com/n1/s450x450_jfs/t4042/336/485174131/112786/cbfa499e/5851f4ecN397534ba.jpg" />
</a>
</div>
<div id="movebox"></div>
</div>
<div id="what">
<img id="bigimg" src="http://img10.360buyimg.com//n0/jfs/t4042/336/485174131/112786/cbfa499e/5851f4ecN397534ba.jpg" />
</div>
<div style="width: 100px; height: 100px; background: green; position: absolute; left: 0px; top: 500px;" >图片来源京东</div>
</html>
在js部分的代码很简单,当然,你也可以选择用jq,但是没不要