Question

我在滚动时在圆形路径中移动对象时遇到问题，对象继续以锯齿形移动。我不知道如何解决这个问题，我认为我的公式不正确。我使用css translate来移动对象。我希望你能帮助我修改我的代码，所有旋转都发生在滚动上，这是我的代码：

<html>
    <head>
        <style>
            body { 
                height: 20000px; 
            }

            .tarz {
                width: 50px;
                height: 50px;
                background: #F00 ;
                position: fixed;
            }

        </style>

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {

                window.objYFlag = "down";
                window.objXFlag = "right";
                window.objY = 0;
                window.objX = 50;
                window.objYMax = 50;
                window.objXMax = 50;

                $(window).scroll(function() {

                    var scroll = $(document).scrollTop();

                    window.objX = ( 50 - (window.objY - scroll) + window.objX ); 
                    //formula for x

                    if (window.objY === window.objYMax) {
                        window.objYFlag = "up";
                    }

                    if (window.objY === 0) {
                        window.objYFlag = "down";
                    }

                    if (window.objYFlag === "down") {
                        window.objY = window.objY + 1;
                    } else {
                        window.objY = window.objY - 1;
                    }

                    console.log(window.objX + ' ' + window.objY);
                    $('.tarz').css('transform', 'translate(' + window.objX + 'px,' + window.objY + 'px)');

                });

            });
        </script>
    </head>
    <body>
        <div class="tarz"></div>
    </body>
    <html>

谢谢你们，我希望你能帮助我。：）

Answer 1

时间来检查你的三角学。这是你想要完成的吗？

 $(window).scroll(function () {
     var scroll = $(document).scrollTop();
     window.objX = 50+100*Math.cos(scroll/25);
     window.objY = 50+100*Math.sin(scroll/25);
     $('.tarz').css('transform', 'translate(' + window.objX + 'px,' + window.objY + 'px)');
 });

http://jsfiddle.net/mblase75/waLK9/

摆弄数字以获得所需的速度和位置。

Jquery在圆形路径中移动对象

1 个答案: