Question

我有一个我继承的客户端项目，它使用javascript创建各种动画效果，同时用户向下滚动浏览网站（有点像视差网站）。

它的问题是它以像素为单位更改值，我们现在想要的是用户百分比。

例如，当用户向下滚动1800像素时，此代码通过将宽度从0增加到750px，从左侧开始#position-left div。它在200px间隔内完成此操作。它通过将内联CSS写入DIV标记来实现这一目的：

{
                    selector: '#location-left',
                    startAt: 1800,
                    endAt: 2000,
                    onEndAnimate:function( anim ) {},
                    keyframes: [
                        { 
                            position: 0,
                            properties: {
                                "top" : 0,
                                "width" :  0
                            }

                        },
                        {
                            position: 1,
                            properties: {
                                "top" : 0,
                                "width" : 750
                            }
                        }
                    ]
                }

我想要它做的是，从0％到50％。我最初的想法是计算一组var标签：

var a = $(document).width();
var a3= Math.floor(a * 0.3);  // 30% 
var a5= Math.floor(a * 0.5);  // 50%
var a8= Math.floor(a * 0.8);  // 80%
etc.

然而，在我走到那个兔子洞之前，我想看看是否有一种更容易让我失踪的方法。

Answer 1

见this question。您可以将百分比放在引号中，例如：

{ 
    position: 0,
        properties: {
            "top" : "10%",
            "width" :  "30%"
        }

 },

Javascript动画值为百分比

1 个答案: