最新特效 | 模仿手机QQ底部导航栏Icon拖拽效果

本文由 kobeyxd123 投稿。

kobeyxd123 的博客地址：

http://blog.csdn.net/kobeyxd123

这个效果之前有后台问我怎么实现，终于等到有人分享，开心~~

之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。

先上个效果图吧

实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。

备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的眼睛和嘴巴图标。切图时将一张整体图片切成了这两个图标。具体可下载Demo参考里面的图片资源。

其中range为可拖动的范围（其实是倍数），默认值是1，不宜设置过大。