【jmfans案例系列】照片放大、缩小效果（类头像选择）

JmFans · 发表于 2014-9-22 09:54:28

实现效果：为方便演示，实际手机操作中的双指滑开（放大），双指并拢（缩小）改为点击“+”（放大），“-”（缩小）；

实现主要思路：
1、把背景图放到一个动态面板中，动态面板垂直、水平滚动都设为自动，等图片放大后，可以移动图片；
2、放大、缩小需要用的动作就是—调整大小，那如何调整，简单的，你可以直接从一个大小过渡到另一个大小，那这种效果不符合我们想要的，所以，我们才需要通过变量来实现；
3、添加三个变量：width(宽)、height(高)、coe(我把它定义为系数)；
4、width、height默认值为当前图片得宽高（320*568），coe默认为1，设置点击事件，宽度、高度调整到大小为width×coe，height×coe，设置值coe+0.1（放大的设置，缩小的-0.1），这样意味着每点击一次，宽度和高度都会按照原大小的10%递增（或递减）。

原文地址：http://www.jmfans.com/archives/419

放大、缩小照片.vp (581.75 KB, 下载次数: 17)