jQuery拖動、滾輪查看大圖-相似地圖操做

源碼提要：

。pageX,pageY 鼠標指針的位置,相對於文檔的左邊緣；
。parseInt(css("left"))的left值；
。mousedown、mouseup、mousemove 鼠標事件；
。DOMMouseScroll、onmousewheel 鼠標滾動事件；
源碼：

<div class="pic-area" style="position:relative;">
        <div class="pic-tool">
            <div class="tool-move">
                <div class="move-left" id="J-picview-left"></div>
                <div class="move-right" id="J-picview-right"></div>
                <div class="move-top" id="J-picview-top"></div>
                <div class="move-bottom" id="J-picview-bottom"></div>
            </div>
            <div class="tool-zoom">
                <div class="zoom-in" id="J-picview-zoomIn"></div>
                <div class="zoom-out" id="J-picview-zoomOut"></div>
            </div>
        </div>
        <img src="media/svg/d.jpg" id="pic-zoom">
    </div>
</div>

$(function() {
    //鼠標拖動
    var _move = false,_x, _y,
        $img = $("#pic"),w=$(".pic-area").width(),h=$(".pic-area").height(); 
    $img.mousedown(function(e) {
         _move = true;
         _x = e.pageX - parseInt($(this).css("left"));//圖片距左上角距離
         _y = e.pageY - parseInt($(this).css("top"));
         return false; 
    });
    $img.mousemove(function(e) {
         if (_move) {
                var x = e.pageX - _x; 
                var y = e.pageY - _y;
                if(x>0) x=0;
                if(x<w-$img.width()){
                    x=w-$img.width();
                } 
                if(y>0) y=0;  
                if(y<h-$img.height()){
                    y=h-$img.height();
                }
                $img.css({ top: y, left: x }); 
            }
     }).mouseup(function() {
         _move = false;
    });
    //鼠標滾輪
    if (document.addEventListener) {  //firefox
        $img[0].addEventListener("DOMMouseScroll", fnMouseWheel);
    }
    $img[0].onmousewheel = fnMouseWheel; // other browser
    function fnMouseWheel(e) {
        var evt = e || window.event;
        var wheelDelta = evt.wheelDelta || evt.detail; //鼠標滾動值，，火狐3倍數=向下滾動、其餘-120倍數=向下滾動
        if (wheelDelta == -120 || wheelDelta == 3)//向下
           $img.width($img.width()*1.5); 
        else if (wheelDelta == 120 || wheelDelta == -3)//向上
            $img.width($img.width()*0.5);   
    }
    //方向移動
    $("#J-picview-right").click(function(){
        var x= parseInt($img.css("left"))-20;
        if(x<w-$img.width()){
            x=w-$img.width();
        } 
        $img.css({left:x});
    });
    $("#J-picview-left").click(function(){
        var x= parseInt($img.css("left"))+20;
        if(x>0) x=0;
        $img.css({left:x});
    });
    $("#J-picview-top").click(function(){
        var y= parseInt($img.css("top"))-20;
        if(y<h-$img.height()){
            y=h-$img.height();
        }
        $img.css({top:y});
    });
    $("#J-picview-bottom").click(function(){
        var y= parseInt($img.css("top"))+20;
        if(y>0){
            y=0;
        }
        $img.css({top:y});
    });
    //放大縮小
    $("#J-picview-zoomIn").click(function(){
        $img.width($img.width()*1.5);
    });
    $("#J-picview-zoomOut").click(function(){
        $img.width($img.width()*0.5);
    });
 });