在浏览购物网站的时候，会经常看到可以观察细节的放大镜特效，最近尝试着做服装网站，就学到一些，分享一下：
首先准备一张图片，和一张等比缩放的图片，及一张网格罩层图
<body> <div id = "box"> <div id="small_box"> <img src="xiao.jpg" alt=""> <span id="mask"> </span> </div> <div id="big_box"> <img src="da.jpg" alt=""> </div> </div>
设置样式：因为比较简单就使用内部样式表
<style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 260px; height: 260px; border: 1px solid #dddddd; position: relative; margin: 50px; } #small_box{ width: 260px; height: 260px; position: relative; } #small_box #mask{ position: absolute; width: 100px; height: 100px; background: url(wangge.jpg) repeat; top:0; left: 0; opacity:0.2; display: none; } #big_box{ position: absolute; left: 300px; top: 0; width: 260px; height: 260px; border: 1px solid #dddddd; overflow: hidden; display: none; } #big_box img{ position: absolute; z-index: 5; } </style>
设置JavaScript
<script type="text/javascript"> window.onload = function (){ //1.获取需要的标签 var box = document.getElementById('box'); var small_box = box.children[0]; var big_box = box.children[1]; var small_img = small_box.children[0]; var mask = small_box.children[1]; var big_img = big_box.children[0]; //2.监听鼠标移入 small_box.onmouseover = function (){ //2.1 显示网格罩层和大图出来 mask.style.display = 'block'; big_box.style.display = 'block'; //2.2 监听鼠标移动 small_box.onmouseover = function(e){ e = e || window.event; //2.3 求出小盒子移动的水平和垂直的距离 var moveX = e.clientX - small_box.offsetLeft - box.offsetLeft - mask.offsetWidth * 0.5; var moveY = e.clientY - small_box.offsetTop - box.offsetTop - mask.offsetHeight * 0.5; //2.4 边界处理 if(moveX < 0){ moveX = 0; }else if(moveX >= small_box.offsetWidth - mask.offsetWidth){ moveX = small_box.offsetWidth - mask.offsetWidth; } if(moveY < 0){ moveY = 0; }else if(moveY >= small_box.offsetHeight - mask.offsetHeight){ moveY = small_box.offsetHeight - mask.offsetHeight; } // 2.5让小盒子移动起来 mask.style.left = moveX + 'px'; mask.style.top = moveY + 'px'; //2.6 让大图移动起来 // 公式：moveX /大图移动的距离 = (small_box宽度)/(big_img宽度 - big_box宽度) var x = moveX / (small_box.offsetWidth - mask.offsetWidth); var y = moveY / (big_img.offsetWidth - big_box.offsetWidth); big_img.style.left = -x * (big_img.offsetWidth - big_box.offsetWidth) + 'px'; big_img.style.top = -x * (big_img.offsetWidth - big_box.offsetWidth) + 'px'; } } } </script>
运行结果：
