Download the jquery file.
panzoom.js
And design the form as follows:
<head>
<title>Panzoom for jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #F5FCFF;
color: #333666;
}
section {
text-align: center;
margin: 50px 0;
}
.panzoom-parent {
border: 2px solid #333;
}
.panzoom-parent .panzoom {
border: 2px dashed #666;
}
.buttons {
margin: 40px 0 0;
}
.panzoom {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
<script src="../test/libs/jquery.js"></script>
<script src="../dist/jquery.panzoom.js"></script>
</head>
<body>
<section>
<div class="parent">
<div class="panzoom">
<iframe src="http://www.w3schools.com" width="100%" height="100%"></iframe>
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
<script>
(function () {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
</section>
</body>
Output:
panzoom.js
And design the form as follows:
<head>
<title>Panzoom for jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #F5FCFF;
color: #333666;
}
section {
text-align: center;
margin: 50px 0;
}
.panzoom-parent {
border: 2px solid #333;
}
.panzoom-parent .panzoom {
border: 2px dashed #666;
}
.buttons {
margin: 40px 0 0;
}
.panzoom {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
<script src="../test/libs/jquery.js"></script>
<script src="../dist/jquery.panzoom.js"></script>
</head>
<body>
<section>
<div class="parent">
<div class="panzoom">
<iframe src="http://www.w3schools.com" width="100%" height="100%"></iframe>
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
<script>
(function () {
var $section = $('section').first();
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
</section>
</body>
Output:
No comments:
Post a Comment