smartZoom图片缩放插件

smartZoom图片缩放插件是基于jQuery的一款图片缩放查看器，右上角有控制器，提供放大缩小，并且可以上下左右移动的功能，在电脑上，可以双击鼠标放大，还可以用鼠标拖动图片，进行查看，在手机端，支持手滑查看图片，还支持多点触摸放大图片。我爱模板网亲自用在客户的手机端案例上，非常方便。

<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<script src="js/e-smart-zoom-jquery.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://libs.useso.com/js/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<script>
    $(document).ready(function() {        
        $('#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);
        } 
    });
</script>

<div id="pageContent">
	<div id="imgContainer"> <img id="imageFullScreen" src="assets/zoomFullScreen.jpg"/> </div>
		<div id="positionButtonDiv">
		<p><span> <img id="zoomInButton" class="zoomButton" src="assets/zoomIn.png" title="zoom in" alt="zoom in" /> <img id="zoomOutButton" class="zoomButton" src="assets/zoomOut.png" title="zoom out" alt="zoom out" /> </span> </p>
		<p>
			<span class="positionButtonSpan">
				<map name="positionMap" class="positionMapClass">
					<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
					<area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
					<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
					<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
				</map>
				<img src="assets/position.png" usemap="#positionMap" />
			</span>
		</p>
	</div>
</div>

<img src="assets/position.png" usemap="#positionMap" />