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

最近在做一个电商的平台,需要展示商品的图片,自然而然也得有放大镜了,刚才是在项目中封装了一个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提问,还在一步一步向前走,欢迎指教拍砖。

你可能感兴趣的:(简单实现电商放大镜的插件)