本文介绍如何使用AlloyTouch CSS版本实现QQ看点资料卡功能，包括流畅滚动及头部动画效果。通过60行代码展示加载更多数据时保持平滑滚动的技巧。
GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡
原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/kandian
先验货
如你体验所见，流程的滚动的同时还能支持头部的动画？不断地加载新数据还能做到流畅的滑动！怎么做得的？使用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