图片放大镜效果是一种
目前,Cloud Zoom 的最新版本是 1.0.2,我们就此
与其他插件不一样,C
只加一个 class 效果是默认的,想要其
参数 | 描述 | 默认值 |
---|---|---|
zoomWidth | 放大镜窗口的宽度,如 | 'auto' |
zoomHeight | 放大镜窗口的高度,如 | 'auto' |
position | 放大镜窗口的位置,可 | 'right' |
adjustX | 距离小图片的水平位置 | 0 |
adjustY | 距离小图片的垂直位置 | 0 |
tint | 非放大区域的颜色,必 | false |
tintOpacit | 不透明度,0 是完全透明,1 是完全不透明 | 0.5 |
lensOpacit | 镜头鼠标指针不透明度 | 0.5 |
softFocus | 微微的模糊效果,可选 | false |
smoothMove | 放大区域图片移动的平 | 3 |
showTitle | 显示图片标题,可选 true 或 false | true |
titleOpaci | 标题不透明度,0 是完全透明,1 是完全不透明 | 0.5 |
再看几个加上了非默认
如果你认为要在 a 标签里加上 rel 属性不好,没做做到 “js” 与 XTHML 分离的话,那就把他们
$(function(){ $('.cloud- zoom').att r('rel','t int:"#f00" '); })
不过要注意顺序哦,必
< type="text/javascrip t" src="jquer y.min.js"> < type="text /javascrip t"> $(function (){ $('.cloud- zoom').att r('rel','t int:"#f00" '); }) < type="text /javascrip t" src="cloud -zoom.1.0. 2.min.js">
因为 Cloud Zoom 在加载的时候必须得到
至于到底是把 rel 写在 XHTML 里还是 js 里,就看个人喜好吧,
另外要注意的是:
- rel 属性中涉及到数值的都
不要单位,否则插件则 运行不了 - rel 的最后一个属性值后面
不要逗号,否则 IE6 、IE7 下插件运行不了
最后,附上此插件的主