wex5 实战 图片触摸放大移动插件easyzoom的使用与集成

一 前言

客户的需求就是上帝的召唤。

作为一个开发人员，或者软件从业者，客户的要求就是准则。

遇到一个客户，让我做一个图片放大，但是移动拖拽要定位精准。之前研究过一个hammer插件，多次尝试放大后的触摸点定位问题，始终无法解决。客户的需求可以理解，因为不是简单的图片介绍，而是复杂的工程图纸。最后求助于jquery插件easyzomm，达到了客户的要求。今天，把实例贴出来，供大家学习交流。

二 效果演示

三 设计思路与代码实现

1 下载并引入easyzoom.js插件

2 修改并简化dom结构

（注）1在easyzoom的示例中，图片放置了两层，上面是图片，下面是底图。我这里进行了简化。在div里套一个a链接标签，a链接标签里再套一个image图片。

2 在easyzoom的结构中，image是实际图片，a链接里临时存储放大后的图片。

3 div,a,image 三个元素，id和class可以手动修改和添加，与后面的jquery选择器调用一致即可。

3 页面接参并修改图片url

（注）image和a链接两个标签，用jquery的id选择器，选择后把图片url用attr修改属性方法传参

4 easyzoom插件调用

这么简单，对，就这么简单，找到div元素，执行easyZoom()方法。图片就可以实现触摸并移动放大。经测试，支持手指和鼠标。

（注）经测试，所用的jquery插件方法调用必须写在 modelLoad中。

四 总结

1 复杂设计问题，离开wex5向jquery插件寻求解决之道

2 根据插件示例修改dom元素结构。

3 在modelLoad中调用jquery插件的方法。

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。