简单实现电商放大镜的插件

作者: 其心 | 来源:发表于2017-03-07 15:45 被阅读614次

最近在做一个电商的平台，需要展示商品的图片，自然而然也得有放大镜了，刚才是在项目中封装了一个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();

点击跳转到简单的展示页面
展示页面的图片用的是一个非常自信的女孩（其实就是摩拜单车的创始人），现在的展示页面略显简单……如果有希望展示更多例子的朋友可以留言。

2017/02/20　　增加了压缩文件

如果想要兼容低版本或者其他问题，可以在简书留言，也可以去github提问，还在一步一步向前走，欢迎指教拍砖。

网友评论

本文标题：简单实现电商放大镜的插件

本文链接：https://www.haomeiwen.com/subject/opumgttx.html

简单实现电商放大镜的插件