淘宝京东产品图片预览局部放大效果jQuery插件
一个类似淘宝京东产品图片预览局部放大效果jQuery插件,效果如下图
jqZoom图片局部放大代码使用说明
1. 首先引用jqzoom的jquery.jqzoom-core.js、jquery.js和jquery.jqzoom.css这三个文件。
2. 主体的HTML代码只需要在使用jqZoom局部放大效果的img的父A链接标记上使用class="jqzoom"就可以了。然后下面的几个更小的商品缩略图是可选的。
3. 在页尾的</head>后面还需要添加一段初始化javascript代码。可以在Demo页面源码的head部分后部看到。
jqZoom保证了Html页面最少的代码量就很容易地实现了将鼠标放到产品预览图片上自动在右侧弹出新层显示局部放大的效果了。这样你需要保证一套图片有三个大小规格,一个小缩略图,一个中型的预览图和一张原始尺寸的大图。
jqZoom也提供了很多属性,使你不用修改javascript源码就可很好地设置图片局部放大镜的展示效果。比如,可以使用zoomWidth 和zoomHeight设置局部放大窗口的宽和高、position用于设置局部放大窗口的位置、title的true和false设置是否显示图片的标 题等等。详细设置请参考作者网站:min-project
jqzoom配置
OPTION NAME | DEFAULT | DESCRIPTION |
zoomType | 'standard' | The others admitted option values are 'reverse','drag','innerzoom'. |
zoomWidth | 300 | The popup window width showing the zoomed area. |
zoomHeight | 300 | The popup window height showing the zoomed area. |
xOffset | 10 | The popup window x offset from the small image. (always positive to move the popup window more on the right if position is 'right' or more on the left if position is 'left') |
yOffset | 0 | The popup window y offset from the small image. (always positive to move the popup window more on the top if position is 'top' or more on the bottom if position is 'bottom'), |
position | 'right' | The popup window position.Admitted values:'right' ,'left' ,'top' ,'bottom' |
preloadImages | true | if set to true,jqzoom will preload large images. |
preloadText | 'Loading zoom' | The text to show while preloading images. |
title | true | Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title. |
lens | true | if set to false,the small lens,over the image, won't show. |
imageOpacity | 0.4 | Set the image opacity when the 'zoomType' option is set to 'reverse'. |
showEffect | 'show' | The effect by which showing the popup window.Options available: 'show' ,'fadein'. |
hideEffect | 'hide' | The effect by which hiding the popup window.Options available: 'hide' ,'fadeout'. |
fadeinSpeed | 'slow' | Changes fade in speed,in case the showEffect option is set to 'fadein'.(options: 'fast','slow',number) |
fadeoutSpeed | '2000' | Changes fade out speed,in case the hideEffect option is set to 'fadeout'.(options: 'fast','slow',number) |