zoukankan      html  css  js  c++  java
  • 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

     

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

  • 相关阅读:
    再谈 Devstack(Rocky)
    记一次性能测试与优化经历
    Nova rebuild for boot from volume issue
    OpenStack RPM Sample 解析
    [Cinder] 存储 Qos
    Octavia Rocky UDP 负载均衡功能试验
    Keepalived + LVS-NAT 实现高可用四层 TCP/UDP 负载均衡器
    LVS 四层 TCP/UDP 负载均衡器
    集群的定义以及类别定义
    对程序员又了解了一些
  • 原文地址:https://www.cnblogs.com/fangziffff123/p/6255353.html
Copyright © 2011-2022 走看看