两种方法 实则原理相同，只是图片的保存形式不一样。小图大图成比例，大图大小设为小图的4倍。图片自己去找哦
一、大图直接放在div当中
<!doctype html><html><head><title>放大镜</title><meta charset="utf-8"/><link href="css/magnifier.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="js/magnifier.js"></script><style>*{margin:0px;padding:0px;}#small-box{position:relative;border:1px solid #ccc;display: block;width: 500px;height: 500px;margin: 50px;}#float-box{display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;filter: alpha(opacity=50);opacity: 0.5;}#big-box {display: none;position:absolute;top:50px;z-index:1;left: 1000px;width: 500px;height: 500px;overflow: hidden;border: 1px solid #ccc;}#big-box img{position:absolute;}</style></head><body><div id="small-box"><div id="float-box"></div><img title="small img" src="img/2.jpg"></div><div id="big-box"><img title="bigger img" src="img/3.jpg"></div></body></html><script>window.onload = function () {// 获取所需要操作的对象var smallBox = document.getElementById("small-box");var floatBox = document.getElementById("float-box");var bigBox = document.getElementById("big-box");var bigImage = bigBox.getElementsByTagName("img")[0];// 鼠标移动到对象上显示放大镜和放大镜放大后的图像smallBox.onmouseover = function(){floatBox.style.display = "block";bigBox.style.display = "block";}// 鼠标移出对象时隐藏放大镜和放大镜放大后的图像smallBox.onmouseout = function(){floatBox.style.display = "none";bigBox.style.display = "none";}// 鼠标在对象上移动触发的事件smallBox.onmousemove = function(e){var event = e || window.event;var left = event.clientX - smallBox.offsetLeft - floatBox.offsetWidth/2;var top = event.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";// 根据比例计算放大镜放大后的图像移动的位移(负数)bigImage.style.marginLeft = -(left * bigImage.offsetWidth)/smallBox.offsetWidth + "px";bigImage.style.marginTop = -(top * bigImage.offsetHeight)/smallBox.offsetHeight + "px";}}</script></body>
</html>
二、大图设为div的背景
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> #dt{ position:relative; width:500px; height:500px; } #fdj{ background:#fff; width:125px; height:125px; position:absolute; top:0; opacity:0.5; filter:alpha(opacity=50); display:none; } #dd{ display:none; width:500px; height:500px; position:absolute; left:600px; top:0; overflow:hidden; background:url("img/3.jpg") } </style> </head> <body> <div id="dt"> <img src="img/2.jpg"> <span id="fdj"></span> </div> <div id="dd"> </div> <script> var dt = document.getElementById("dt"); //这是原图盒子; var dd = document.getElementById("dd"); //这是要放大盒子 var ddc=dd.children[0]; var fdj = document.getElementById("fdj"); //这是放大镜盒子 dt.onmouseover = function () { dd.style.display = "block"; fdj.style.display = "block"; } dt.onmouseout = function () { dd.style.display = "none"; fdj.style.display = "none"; } dt.onmousemove = function (e) { var e=e||window.event; var left = e.clientX -dt.offsetLeft- fdj.offsetWidth/2; var top = e.clientY-dt.offsetTop- fdj.offsetHeight/2; if (left < 0) { left = 0; }else if (left > dt.offsetWidth - fdj.offsetWidth) { left = dt.offsetWidth - fdj.offsetWidth; } if (top < 0) { top = 0; }else if (top > dt.offsetHeight - fdj.offsetHeight){ top = dt.offsetHeight - fdj.offsetHeight; } fdj.style.left = left + "px"; fdj.style.top = top + "px"; dd.style.backgroundPositionX=(-4*left)+"px"; dd.style.backgroundPositionY=(-4*top)+"px"; } </script> </body></html>
