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

最新推荐文章于 2021-06-16 23:26:12 发布

转载最新推荐文章于 2021-06-16 23:26:12 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenliyang/p/6554206.html

本文介绍了一个使用JavaScript实现的头部动画效果案例，通过监听滚动条变化调整头部元素的缩放比例和位置，达到平滑过渡的效果，并实现了加载更多的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

头部动画

加载更多

实现代码

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 ()

转载于:https://www.cnblogs.com/chenliyang/p/6554206.html