看到网上有许多的朋友经常问购物商城图片的放大效果，正好的是，项目中也要用到这个效果，于是从网上搜了点代码，现在展示给大家看看。

  效果图展示： 

  代码展示：

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>图片放大镜效果</title>
    <style type="text/css">
#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 100px; height: 100px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:500px; height:500px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
    function getByClass(oParent, sClass) {
        var aEle = oParent.getElementsByTagName('*');
        var aTmp = [];
        var i = 0;
        for (i = 0; i < aEle.length; i++) {
            if (aEle[i].className == sClass) {
                aTmp.push(aEle[i]);
            }
        }
        return aTmp;
    }
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        var oMark = getByClass(oDiv, 'mark')[0];
        var oFloat = getByClass(oDiv, 'float_layer')[0];
        var oBig = getByClass(oDiv, 'big_pic')[0];
        var oSmall = getByClass(oDiv, 'small_pic')[0];
        var oImg = oBig.getElementsByTagName('img')[0];
        oMark. = function () {
            oFloat.style.display = 'block';
            oBig.style.display = 'block';
        };
        oMark. = function () {
            oFloat.style.display = 'none';
            oBig.style.display = 'none';
        };
        oMark. = function (ev) {
            var oEvent = ev || event;
            var l = oEvent.clientX - oDiv.offsetLeft - oSmall.offsetLeft - oFloat.offsetWidth / 2;
            var t = oEvent.clientY - oDiv.offsetTop - oSmall.offsetTop - oFloat.offsetHeight / 2;
            if (l < 0) {
                l = 0;
            }
            else if (l > oMark.offsetWidth - oFloat.offsetWidth) {
                l = oMark.offsetWidth - oFloat.offsetWidth;
            }
            if (t < 0) {
                t = 0;
            }
            else if (t > oMark.offsetHeight - oFloat.offsetHeight) {
                t = oMark.offsetHeight - oFloat.offsetHeight;
            }
            oFloat.style.left = l + 'px';
            oFloat.style.top = t + 'px';
            var percentX = l / (oMark.offsetWidth - oFloat.offsetWidth);
            var percentY = t / (oMark.offsetHeight - oFloat.offsetHeight);
            oImg.style.left = -percentX * (oImg.offsetWidth - oBig.offsetWidth) + 'px';
            oImg.style.top = -percentY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';
        };
    };
</script>
</head>
<body>
    <div id="div1">
    <div class="small_pic">
  <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="Photos/small.png" alt="放大镜图片一" longdesc="http://www.miaov.com" />
    </div>
    <div class="big_pic">
  <img src="Photos/psb.jpeg" alt="放大镜图片二" longdesc="http://www.miaov.com" />
 </div>
</div>
</body>
</html>