jquery zoom和pan

Question

我正在使用jquery-1.2.6.js和jquery.panFullSize.js两个js文件来缩放和平移图像。

这是我的HTML，

<a href="#" id="zoom">Zoom< /a>

<img src="testimage.jpg" alt="finnish winter" width="600" border="0" 
    usemap="#mypicMap" id="mypic" style="border: medium solid black" />

这是我的javascript，

$("img#mypic").panFullSize(700, 450).css("border", "medium solid black");
$("a#zoom").toggle(function(){
        $("img#mypic").normalView();
    },
    function(){
        $("img#mypic").panFullSize();
    }
);

我正在尝试，如果我点击图像（mousedown＆lt; 200微秒），它将放大/缩小（切换）缩放超链接工作。如果我拖动（mousedown＆gt; 200微秒）图像，那么它将平移为平移工作。

Answer 1

看起来插件panFullSize创建了一个div，其中包含前置平移的图像的id。所以你可以这样做：

   $('#panmypic').mousedown(function(){
        $(this).bind('mouseup',function(){
            $("img#mypic").normalView();
        })
        .bind('mousemove',function(e){
            $(this).unbind('mouseup');
        });
    });
   $("img#mypic").click(function(){
             $("img#mypic").panFullSize();  
    });