Question

我想制作一个可以缩放和改变按钮位置的功能。单击时，我希望它转换到页面的绝对中心并缩放。不能让它工作，菜鸟在这里！谢谢！

<div id="carousel" class="carousel">
    <a href="project.html" class="thumb" id="thumb">
        <div class="tbTitle">
            <h2>Diamonds and Pearls</h2>
            <div class="vid-holder"></div>
        </div>
        <video src="img/01.mp4" type="video/mp4" loop muted autoplay playsinline></video>
    </a>
</div>

Css -

.thumb {
    position: relative;
    max-width: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 3.5em;
}

.huge-thumb {
    max-width: 1280px;
    position: fixed;
}

jQuery -

$('#thumb').on("click", function (ev) {
    ev.preventDefault();
    var scale = $("#thumb").height()/($("#huge-thumb").height() * 2);
    var toY = $("#thumb").offset().top - $("#huge-thumb").offset().top;  

    $.Velocity.animate($("#huge-thumb"), { translateY: toY, scaleX: scale, scaleY: scale, translateZ: 0 }, { delay: 1500, duration: 1050, easing: "easeInOutQuad" });
});

Answer 1

我不知道你是否在那里使用Velocity V1或V2，但由于V1已经过时，我将为V2回答 -

在Velocity V2中，您使用的各种属性不存在（它们在css中不存在，因此您不会丢失任何内容） - 但它们是transform属性的值，因此您可以正确使用它们。

你也在做一些非常奇怪的调用Velocity的方法，所以请尝试换行（为了清晰起见换行符）：

$("#huge-thumb").velocity({ transform: [ "translate(0," + toY + ") scale(" + scale + ")", "translate(0,0) scale(1)" ] }, { delay: 1500, duration: 1050, easing: "easeInOutQuad" });

变换本身有一些警告，因此使用强制馈送 - 数组中的第二行表示“从0,0移动，并从1：1缩放” - 这是变换的一般限制，因为浏览器不实际上告诉Velocity当前变换的格式是它可以使用的格式。

使用Velocity JS点击更改位置和比例

1 个答案: