【jmfans案例系列】照片放大、缩小效果(类头像选择)
实现效果:为方便演示,实际手机操作中的双指滑开(放大),双指并拢(缩小)改为点击“+”(放大),“-”(缩小);实现主要思路:
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
页:
[1]