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('/upload/20071130224657571.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="/upload/20071130224657571.jpg" οnmοusemοve="move(event)"></div>

<div id="bigbox"></div>

<div id="view"></div>