js放大镜效果

                                                                                                js放大镜效果

<script language="JavaScript">
<!--
var srcX = 1024; //原图长宽
var srcY = 768;
var bigX = 500; //原比例预览大小,可以设置成任意大小
var bigY = 300;
var smallX = 256; //缩略图大小,要与原大小成比例
var smallY = 192;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 8; //边框
window.οnlοad=function (){
    bigbox.style.borderWidth=border;
    bigbox.style.width=bigX+border*2;
    bigbox.style.height=bigY+border*2;
    smallpic.width=smallX;
    smallpic.height=smallY;
    view.style.width=viewX;
    view.style.height=viewY;
    smallbox.style.borderWidth=border;
    if (window.event){
        smallbox.style.width=smallpic.offsetWidth+border*2;
        smallbox.style.height=smallpic.offsetHeight+border*2;
    }else{
        smallbox.style.width=smallpic.offsetWidth;
        smallbox.style.height=smallpic.offsetHeight;
    }
    move(event);
}
function move(e){
    var e = window.event?window.event:e;
    var iebug = 0;
    if (window.event){
        var vX = e.offsetX - viewX/2;
        var vY = e.offsetY - viewY/2;
    }else{
        var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
        var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
        iebug = 2;
    }
    if (vX < 0) vX = 0;
    if (vY < 0) vY = 0;
    if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
    if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
    view.style.left = vX + smallbox.offsetLeft + border;
    view.style.top = vY + smallbox.offsetTop + border;
    bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl;
}
//-->
</script>

<style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;background:url('00001.jpg') no-repeat;}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
.head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>

 

<div class="head">图片放大效果</div>
<div id="smallbox"><img id="smallpic" src="00001.jpg" border="0" onMouseMove="move(event)"></div>
<div id="bigbox"></div>
<div id="view"></div>

将js和样式放到网页的head，下面的代码放到body中,即可实现效果。