在javaScript中重新设置元素的y位置

reseting y position of an element in javaScript

本文关键字：元素 位置 设置 javaScript 新设置      更新时间：2023-09-26

我有一个画布，点击按钮向上推。我正试图在孩子们结束后让它恢复原状，但它根本不起作用。它在屏幕顶部开始时很好。我第一次点击按钮时，它确实会下降到400，然后向上滑动到200。但在下一次点击时，它会继续向上飞，而不是先回到400。请帮忙！：）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script src=
    "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>
<body>
    <button onclick="func();">click</button> <canvas height="100" id="canvas"
    style="position:absolute; top:50px; border:3px solid #000000;" width=
    "200"></canvas> 
    <script>
           var c = document.getElementById("canvas");
            function func(){             
                c.style.top = 400 + "px";
                TweenMax.to(c,2,{y: "-=200", onComplete:foo});
            }
            function foo(){
              c.style.top = "400px";
            }
    </script>
</body>
</html>

c.style.top与TweenMax中的y修改无关。在TweenMax.to的第一次调用中，TweenMax在对象上创建了一个转换矩阵（自定义样式），并从此不再关注常规css属性。

您必须在.to调用中定义startAt: {y: '400px'}，以强制TweenMax将tweening重置为静态值。

问题是这个tweening插件实际上更改了transformCSS属性来进行转换。因此，对元素的style.top进行任何更改都不会影响其位置，因为它会被TweenMax的特定于浏览器的transform覆盖。

您可以使用它们的startAt属性始终从所需位置开始。不过我不推荐这个插件，我个人更喜欢jQuery。

演示：http://jsfiddle.net/TyZhB/2/

相关文章：