放大镜效果的原理为 已知A B C A/B=C/D; 求D;
A为小图的offsetWidth C为大图的offsetWidth B为小图移动的距离 D为对应大图的移动的距离
javascript原生的如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
#smallBox{
position:relative;
border:1px solid #ccc;
display: block;
width: 400px;
height: 400px;
margin: 50px;
}
#floatBox{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#bigBox {
display: none;
position:absolute;
top:50px;
z-index:6;
left: 460px;
width: 400px;
height: 400px;
overflow: hidden;
border: 1px solid #ccc;
}
#bigBox img{
position:absolute;
}
</style>
</head>
<body>
<div id="smallBox">
<div id="floatBox"></div>
<img title="small img" src="img/xiong1mi.jpg">
</div>
<div id="bigBox">
<img title="bigger img" src="img/xiong1.jpg">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
window.onload=function(){
var smallBox=document.getElementById("smallBox");
var bigBox=document.getElementById("bigBox");
var floatBox=document.getElementById("floatBox");
var bigImg=bigBox.getElementsByTagName("img")[0];
smallBox.οnmοuseοver=function(){
floatBox.style.display = "block";
bigBox.style.display = "block";
}
smallBox.οnmοuseοut=function(){
floatBox.style.display = "none";
bigBox.style.display = "none";
}
smallBox.οnmοusemοve=function(event){
var e=event||window.event;
var left= e.clientX-smallBox.offsetLeft-floatBox.offsetWidth/2;
var top = e.clientY-smallBox.offsetTop-floatBox.offsetHeight/2;
if (left < 0) {
left = 0;
} else if (left > (smallBox.offsetWidth - floatBox.offsetWidth)) {
left = smallBox.offsetWidth - floatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (smallBox.offsetHeight - floatBox.offsetHeight)) {
top = smallBox.offsetHeight - floatBox.offsetHeight;
}
floatBox.style.left=left+"px";
floatBox.style.top=top+"px";
bigImg.style.left=-(left*bigBox.offsetWidth)/smallBox.offsetWidth+"px";
bigImg.style.top=-(top*bigBox.offsetHeight)/smallBox.offsetHeight+"px";
}
}
</script>
</body>
</html>