js放大镜类淘宝

<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>放大镜效果</title>
<style type="text/css">
    div,img{margin:0;padding:0;}
    #small{width:300px;border:1px #fff solid;position:relative;float:left;}
    #small img{width:300px;float:left;}
    #showimg{width:100px;height:100px;background:#fff;opacity:0.5;filter:alpha(opacity=50);cursor:move;display:none;position:absolute;}
    #bigimg{width:214px;height:207px;float:left;display:none;}
</style>
</head>
<body>

    <div id="small">
        <img src="http://www.zencarttest.com/images/Ralph-Lauren-1030-Leather-Trim-Knit-Silk-Jacket.jpg" alt="shrek2"/>
        <div id="showimg"></div>
    </div>

    <div id="bigimg">&nbsp;</div>

    <script type="text/javascript">
        var $=function(id){return typeof(id)=="string"?document.getElementById(id):id};
        var small=$("small");
        var showimg=$("showimg");
        var bigimg=$("bigimg");
        var smallurl=small.getElementsByTagName("img")[0].getAttribute("src");
        var maxwidth=maxheight=showhalf=0;
        small.onmouseover=function(){
            showimg.style.display="block";
            bigimg.style.display="block";
            showhalf=showimg.offsetWidth/2;
            maxwidth=small.clientWidth-showimg.offsetWidth;
            maxheight=small.clientHeight-showimg.offsetHeight;
        }
        small.onmousemove=function(e){
            e=e||window.event;
            mousepos=mouseposition(e);
            var Top=mousepos.y-small.offsetTop-showhalf;
            var Left=mousepos.x-small.offsetLeft-showhalf;
            var num=bigimg.clientWidth/showimg.clientWidth;
            Top=Top<0?0:Top>maxheight?maxheight:Top;
            Left=Left<0?0:Left>maxwidth?maxwidth:Left;
            showimg.style.top=Top+"px";
            showimg.style.left=Left+"px";
            bigimg.style.background="url("+smallurl+") -"+Left*num+"px -"+Top*num+"px no-repeat";
        }
        small.onmouseout=function(){
            showimg.style.display="none";
            bigimg.style.display="none";
        }
        function mouseposition(ev){
            return{
            x:ev.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft),
            y:ev.clientY+(document.body.scrollTop||document.documentElement.scrollTop)
            }
        }
    </script>
</body>
</html>