GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡

原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/kandian

先验货

访问DEMO你也可以点击这里
源代码可以点击这里

如你体验所见，流程的滚动的同时还能支持头部的动画？不断地加载新数据还能做到流畅的滑动！怎么做得的？使用AlloyTouch CSS 0.2.0及以上版本便可！

头部动画

加载更多

实现代码

var infoList = document.getElementById("infoList"), mockHTML = infoList.innerHTML, scroller = document.getElementById("scroller"), header = document.getElementById("header"), userLogo = document.getElementById("user-logo-wrapper"), loading = false, alloyTouch = null; Transform(scroller, true); Transform(header); header.originY = -70; header.translateY = -70; Transform(userLogo); alloyTouch = new AlloyTouch({ touch: "#wrapper", vertical: true, target: scroller, property: "translateY", maxSpeed: 2, outFactor: 0.1, min: 160 * -20 + window.innerHeight - 202 - 50, max: 0, lockDirection: false, touchStart: function () { reastMin(); }, lockDirection: false, change: function (v) { if (v <= this.min + 5 && !loading) { loading = true; loadMore(); } if (v < 0) { if (v < -140) v = -140; var scaleY = (240 + v) / 240; header.scaleY = scaleY; userLogo.scaleX = userLogo.scaleY = scaleY; userLogo.translateY = v / 1.7; } else { var scaleY = 1 + v / 240; header.scaleY = scaleY; userLogo.scaleX = userLogo.scaleY = scaleY; userLogo.translateY = v / 1.7; } } }) function loadMore() { setTimeout(function ()

GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡相关推荐

html5 qq看点,AlloyTouch实战--60行代码搞定QQ看点资料卡
先验货访问DEMO你也可以点击这里源代码可以点击这里如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0 ...
AlloyTouch 实战 --60 行代码搞定 QQ 看点资料卡
原文链接:github.com/AlloyTeam/A- 先验货访问DEMO你也可以点击这里源代码可以点击这里如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动 ...
短短60行代码搞定鸿蒙“二维码扫描”功能！
开发者(KaiFaX) 面向全栈工程师的开发者专注于前端.Java/Python/Go/PHP的技术社区可以实现的效果就是打开摄像头扫描一张二维码图片然后显示二维码里面的内容,看个视频一睹为快吧(界 ...
python做事件研究法_35行代码搞定事件研究法（上）
作者简介: 祝小宇,个人公众号:大猫的R语言课堂这期大猫课堂将会教大家如何用35行R代码写出最有效率的事件研究法. 注意,本代码主要使用data.table完成,关于data.table包的相应知识 ...
35行代码搞定事件研究法（下）
作者简介: 祝小宇,个人公众号:大猫的R语言课堂前文推送: 35行代码搞定事件研究法(上) Hello亲爱的小伙伴们,上期已经讲到如何对单一事件日计算超额收益,本期将会教大家如何针对多个股票多个事件 ...
java微信支付代码_10行代码搞定微信支付(Java版)
原标题:10行代码搞定微信支付(Java版) 微信支付痛点对于大多数同学来说,要开发微信支付可不简单.附上微信支付官方文档网页链接从文档上可以看出,你需要解决很多问题,我就随便挑几个吧. xml与 ...
万万想不到 10行代码搞定一个决策树
01决策树模拟实验文章目录 01决策树模拟实验要求决策树简单介绍搭建环境产生数据集划分训练集和测试集生成决策树 Cross-Validation法可视化决策树 10行代码搞定决策树要 ...
35行代码搞定事件研究法（上）
作者简介: 祝小宇,个人公众号:大猫的R语言课堂这期大猫课堂将会教大家如何用35行R代码写出最有效率的事件研究法. 注意,本代码主要使用data.table完成,关于data.table包的相应知识 ...
resnet50代码_13、SOTA论文实践-学习ResNet（80行代码搞定残差backbone网络）
0.论文 Camera Distance-aware Top-down Approach for 3D Multi-person Pose Estimation from a Single RGB I ...
国外stripe支付，超简单几行代码搞定
国外stripe支付,超简单几行代码搞定海外的项目需要stripe支付很简单几行代码先加入依赖: compile 'com.stripe:stripe-android:6.1.2' 总共两种 ...

GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡

GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡

先验货

头部动画

加载更多

实现代码

GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡相关推荐

最新文章

热门文章