首页>>Jquery图片>>jQuery支持鼠标滚轮缩放以及点击按钮缩放图片插件(2018-09-04)

jQuery支持鼠标滚轮缩放以及点击按钮缩放图片插件

jQuery支持鼠标滚轮缩放以及点击按钮缩放图片插件
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="mkeContentBox">  
  2. <!--效果html开始-->  
  3. <div id="pageContent">  
  4.   <div id="imgContainer"><div id="smartZoomContainer1468760257884" class="zoomableContainer" style="overflow: hidden; position: relative; top: 0px; left: 0px; width: 980px; height: 610px;"><img id="imageFullScreen" src="images/webImg.jpg" style="visibility: visible; cursor: move; transform-origin: 0px 0px 0px; transition: all 0s ease-out; transform: translate3d(-2033.12px, -1115.82px, 0px) scale3d(2.33971, 2.33971, 1);"></div></div>  
  5.   <div id="positionButtonDiv">  
  6.     <p>  
  7.      <span>  
  8.       <img id="zoomInButton" class="zoomButton" src="images/zoomIn.png" title="zoom in" alt="zoom in">  
  9.       <img id="zoomOutButton" class="zoomButton" src="images/zoomOut.png" title="zoom out" alt="zoom out">  
  10.      </span>  
  11.     </p>  
  12.     <p><span class="positionButtonSpan">  
  13.       <map name="positionMap" class="positionMapClass">  
  14.         <area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up">  
  15.         <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left">  
  16.         <area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right">  
  17.         <area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom">  
  18.       </map>  
  19.       <img src="images/position.png" usemap="#positionMap"> </span> </p>  
  20.   </div>  
  21. </div>  
  22. <!--效果html结束-->  
  23. </div>  

 

JavaScript Code
  1. <script>  
  2.     $(document).ready(function() {          
  3.         $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});          
  4.         $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);  
  5.         $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);  
  6.           
  7.         function zoomButtonClickHandler(e){  
  8.             var scaleToAdd = 0.4;  
  9.             if(e.target.id == 'zoomOutButton')  
  10.                 scaleToAdd = -scaleToAdd;  
  11.             $('#imageFullScreen').smartZoom('zoom', scaleToAdd);  
  12.         }          
  13.         function moveButtonClickHandler(e){  
  14.             var pixelsToMoveOnX = 0;  
  15.             var pixelsToMoveOnY = 0;  
  16.       
  17.             switch(e.target.id){  
  18.                 case "leftPositionMap":  
  19.                     pixelsToMoveOnX = 200;    
  20.                 break;  
  21.                 case "rightPositionMap":  
  22.                     pixelsToMoveOnX = -200;  
  23.                 break;  
  24.                 case "topPositionMap":  
  25.                     pixelsToMoveOnY = 200;    
  26.                 break;  
  27.                 case "bottomPositionMap":  
  28.                     pixelsToMoveOnY = -200;   
  29.                 break;  
  30.             }  
  31.             $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);  
  32.         }   
  33.     });  
  34. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_689.html