文件名称:
cardSlideAround-卡片滑动切换特效.zip
开发工具:
文件大小: 3mb
下载次数: 0
上传时间: 2019-09-23
详细说明： 可以改造为探探等卡片切换效果效果图如下效果简述上下左右均可移动随点击移动在上下左右一定的范围内移动后会返回原来的位置，不会切换只有大于一定范围才会产生切换，同时切换效果随移动方向不同，产生不同的切换效果代码解析wxmlwxml里有两个卡片，相互重叠卡片绑定touch的开始，移动和结束方法，获取点击的位置绑定动画，方便之后的动画操作js在touch的开始方法里，绑定点击的初始位置设置卡片绝对定位，在touch移动的方法里，绑定top和left值，实现随点击点移动而移动在点击的结束方法里获取最后的点击位置，和初始位置做对比，如果x，y移动的大小在一定的范围内，则恢复绝对定位的初始值如果大于x，y设定的范围则实现切换效果特效微信的js动画特效是根据css3封装而来， 我当时尝试用css3实现，但结合一些动画出发要求等原因，使用微信的js东特特效还是相对方便绑定了z-index，基本实现两张卡片的相互切换模仿微信小程序文档写了动画的效果，注意的就是translate移动之后，一定要再移动回0，这样才能在之后回到卡片初始位置卡片绑定了透明度的变量，根据移动所占百分比，来显示底层的透明度movebox原本分1,2。目前已经合并为一个函数，其他1,2的控制动效控制函数可以适当合并后续这个源码，可以在卡片内插入任意内容，相互切换我自己使用的情况是去除了移动，直接切换，1、2卡片绑定的是同一个变量，由于不能移动，所以看不到下面的内容，一旦成功切换卡片，同时绑定的变量也会切换，达到了内容随卡片切换的效果如果不去除移动的话，就不能1、2卡片绑定同一个变量，因为移动上面卡片会看到下面的卡片解决方法1（个人思考，如果有更好的欢迎交流）绑定两个变量，切换卡片的同时，更新该卡片绑定的数据解决方法2（个人思考，如果有更好的欢迎交流）1、2卡片绑定一个数组变量，同时1、2绑定的固定的数组0位和1位数据一旦切换，则分别使用pop或shift，push或unshift进行数组变量的数据更新这样保证了数组数据切换时，卡片数据的相对固定
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
相关搜索:
