代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>e-smartdev : pan and zoom plugin</title>
<meta name="description" content="" />
<meta name="author" content="damien" />
<!--<meta name="viewport" content="width=device-width; initial-scale=1.0" />-->
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="../src/jquery-1.11.0.min.js"></script>
<script src="../src/e-smart-zoom-jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
$('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
function zoomButtonClickHandler(e){
var scaleToAdd = 0.8;
if(e.target.id == 'zoomOutButton')
scaleToAdd = -scaleToAdd;
$('#imageFullScreen').smartZoom('zoom', scaleToAdd);
}
});
</script>
</head>
<body>
<div id="page">
<div id="pageContent">
<div id="imgContainer">
<img id="imageFullScreen" src="assets/zoomFullScreen.jpg"/>
</div>
<div id="positionButtonDiv">
<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>
</div>
</div>
</div>
</body> </html>
效果图如下：
