最近在做一个电商的平台,需要展示商品的图片,自然而然也得有放大镜了,刚才是在项目中封装了一个CMD的模块,后台独立出来简单的搞了一个jQuery的插件。
插件的自定义参数和一些限制
一个商品放大镜的jquery插件
- 依赖jquery >=1.7
- 兼容性IE >= 9
- @multiple 可放大的倍数,默认是2倍
- @bgColor 暂时只能设置rgba的颜色
- @canShow 如果因为加载等原因想暂时禁止鼠标的移入事件,可以通过给当前元素下的img节点增加data-show的属性,当属性值为false时,移入效果终止,直到data-show属性更改为非false等其他值。也可以一开始就设置false来禁止鼠标移入效果
- @time 设置延迟时间,避免误触发,提高用户体验,单位(ms)
简单的展示使用
外面一个div,里面放一个img就可以了。
$('#imgBox').magnifier();
点击跳转到简单的展示页面
展示页面的图片用的是一个非常自信的女孩(其实就是摩拜单车的创始人),现在的展示页面略显简单……如果有希望展示更多例子的朋友可以留言。
下载
去往github
github地址,点击去下载,喜欢的可以给个星星,不喜欢也可以提出建议直接下载
点击直接下载zip文件
更新提示
2017/02/20 增加了压缩文件
建议和反馈
如果想要兼容低版本或者其他问题,可以在简书留言,也可以去github提问,还在一步一步向前走,欢迎指教拍砖。