这是作者对自己插件的一段说明:
Cloud Zoom is a jQuery plugin comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.
好了,我们不多说其他的了,先来看看如何使用这个插件吧!(主要是我没在插件的主页上找到相关的使用文档,所以只好自行对照着代码,试着说说!
第一步:自然是包含相关的脚本与CSS文件:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.1.min.js"></script>
接下来,就是HTML文件了:
<div class="zoom-small-image">
<a href='001.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 0, adjustY:0">
<img src="001_s.jpg" alt='' title="Optional title display" /></a>
</div>
最后就是对插件的调用了:
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom({
position: 'inside'
});
附件里提供的就是这么简单的样例,对我个人而言,这就是我需要的效果了,非常动感,同时又不影响页面。
另外,对于插件的调用稍微再说几句:
1、可以给函数调用传递更多的参数以达到自己需要的效果,这些参数有:
zoomWidth: 'auto',
zoomHeight: 'auto',
position: 'right',
tint: false,
tintOpacity: 0.5,
lensOpacity: 0.5,
softFocus: false,
smoothMove: 3,
showTitle: true,
titleOpacity: 0.5,
adjustX: 0,
adjustY: 0
相对于这里调用的position参数,主要有以下几个值,是用来定位放大效果显示的位置的:
'top'
'right'
'bottom'
'left'
'inside'
而adjustX和adjustY是用指定相对于原图的偏移大小,而且这2个参数需要的HTML标签里设置,如:
rel="adjustX: 0, adjustY:0"
传值无效,并且不能省略。
其他的参数则没什么特别说明的,大家不仿一一测试,呵呵!
在线演示:[url=/Demo/cloud_zoom/Demo.html]/Demo/cloud_zoom/Demo.html[/url]
插件下载:cloud-zoom.1.0.1.rar