您的位置:首页 > 其它

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

2018-08-28 17:12 1011 查看

<body>
  <img class="close_btn" onclick="close_layer();" src="../images/error.png" />
  <div id="imgContainer">
   <img id="imageFullScreen" src="../images/qjt_df.png" />
  </div>
 </body>

 

<script type="text/javascript" src="../js/jquery-2.1.1.min.js" ></script>
  <script type="text/javascript" src="../js/e-smart-zoom-jquery.min.js" ></script>

 

window.onload=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);
  }
 }

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: