Author: 刘老师(Aaron Lau)
jQuery的常用插件之放大镜(一)jquery.zoom.js
官网地址，使用前，请先点此下载
如果下不下来，请复制链接到迅雷中下载。
如果使用的是Linux或者Mac机，请用wget命令下载。
效果图
Zoom插件是一个非常棒的插件，使用方法也非常简单，只有以下三个步骤
- 引用jquery.min.js
- 引用jquery.zoom.js
- 执行zoom插件的方法
使用方法
<span class='zoom' id='ex1'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Hover</p>
</span>
<span class='zoom' id='ex2'>
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>Grab</p>
</span>
<span class='zoom' id='ex3'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Click to activate</p>
</span>
<span class='zoom' id='ex4'>
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>Click to toggle</p>
</span>
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
参数
| Property
| Default
| Description
|
| url
| false
| The url of the large photo to be displayed. If no url is provided, zoom uses the src of the first child IMG element inside the element it is assigned to.
|
| on
| 'mouseover'
| The type of event that triggers zooming. Choose from mouseover, grab, click, or toggle.
|
| duration
| 120
| The fadeIn/fadeOut speed of the large image.
|
| target
| false
| A selector or DOM element that should be used as the parent container for the zoomed image.
|
| touch
| true
| Enables interaction via touch events.
|
| magnify
| 1
| Sets the scaling of the zoomed image.
|
| callback
| false
| A function to be called when the image has loaded. Inside the function, `this` references the image element.
|
| onZoomIn
| false
| A function to be called when the image has zoomed in. Inside the function, `this` references the image element.
|
| onZoomOut
| false
| A function to be called when the image has zoomed out. Inside the function, `this` references the image element.
|
参数调用方法
$(document).ready(function(){
$('a.photo').zoom({url: 'photo-big.jpg'});
});