使用smart-zoom插件实现图片的缩放和拖拽功能

最新推荐文章于 2023-05-24 11:58:41 发布

娜小鈊

最新推荐文章于 2023-05-24 11:58:41 发布

阅读量3.3k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_39366606/article/details/82151206

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

window.οnlοad=function()//用window的onload事件，窗体加载完毕的时候
   {
$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
    $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
    $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
    function zoomButtonClickHandler(e){
     var scaleToAdd = 0.8;
     if(e.target.id == 'zoomOutButton')
      scaleToAdd = -scaleToAdd;
     $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
  }
    function moveButtonClickHandler(e){
     var pixelsToMoveOnX = 0;
     var pixelsToMoveOnY = 0;
     switch(e.target.id){
     case "leftPositionMap":
       pixelsToMoveOnX = 50;
       break;
     case "rightPositionMap":
       pixelsToMoveOnX = -50;
       break;
     case "topPositionMap":
       pixelsToMoveOnY = 50;
       break;
     case "bottomPositionMap":
       pixelsToMoveOnY = -50;
       break;
     }
     $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
  }
}

娜小鈊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用smart-zoom插件实现图片的缩放和拖拽功能

&lt;body&gt; &lt;img class="close_btn" onclick="close_layer();" src="../images/error.png" /&gt; &lt;div id="imgContainer"&gt; &lt;img id="imageFullScreen" src="../ima
复制链接

扫一扫

专栏目录