bzoom是一款非常实用的jQuery产品图片放大镜插件。该放大镜插件类似于淘宝等商城网站的产品页图片放大镜。可以实现淡入淡出显示图片及图片自动轮播等功能。该放大镜插件主要实现的功能有:
- 使用淡入淡出的效果进行图片放大和缩小
- 自动轮播图片或手动切换图片
- 根据需要设置展示的图片的数量
- 设置展示图片,小图片和放大图片的尺寸
使用方法
使用该图片放大镜插件之前首先要引入jQuery和jqzoom.js以及插件中提供的style.css文件。
该图片放大镜插件的HTML结构必须如下:
<div class="etalage_wrap"> <ul id="etalage"> <li> <img class="etalage_thumb_image" src="1-thumb.jpg" title="first img" /> <img class="etalage_big_image" src="1.jpg"/> </li> ... </ul> </div>
class类名称和ID要和上面的代码保持一致,class="etalage_thumb_image"
是页面上展示的图片。class="etalage_big_image"
是鼠标滑过时显示的高清大图。
初始化插件
在页面加载完毕之后,可以通过下面的方法来初始化该放大镜插件。
$("#etalage").zoom({ zoom_area_width: 300, autoplay_interval :3000, small_thumbs : 4, autoplay : false });
配置参数
var _option = { align: "left", // 当前展示图片的位置,则放大的图片在其相对的位置 thumb_image_width: 300, // 当前展示图片的宽 thumb_image_height: 400, // 当前展示图片的高 source_image_width: 900, // 放大图片的宽 source_image_height: 1200, // 放大图片的高 zoom_area_width: 600, // 放大图片的展示区域的宽 zoom_area_height: "justify",// 放大图片的展示区域的高 zoom_area_distance: 10, // zoom_easing: true, // 是否淡入淡出 description_opacity: 0.7, small_thumbs: 3, // 小图片展示的数量 smallthumb_inactive_opacity: 0.4, // 小图片处于非激活状态时的遮罩透明度 smallthumbs_position: "bottom", // 小图片的位置 show_icon: true, hide_cursor: false, // 鼠标放到图片时,是否隐藏指针 speed: 600, // autoplay: true, // 是否自动播放 autoplay_interval: 6000, // 自动播放时每张图片的停留时间 }
存在的问题
这个放大镜插件只是一个雏形,还存在一些问题,例如:
- 没有左右箭头来进行更多张图片的轮播,只能展示固定张数的图片
- 图片之间的间距没有合理的计算,是写死的值
- 右侧放大的图片,因为没有border的值,导致比左边大那么一点点