Javascript Jquery在循环路径中移动对象_Javascript_Jquery_Html_Css

Javascript Jquery在循环路径中移动对象

javascript jquery html css

Javascript Jquery在循环路径中移动对象,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在滚动的圆形路径中移动一个对象时遇到了问题，该对象一直以之字形移动。我不知道如何解决这个问题，我认为我的公式不正确。我使用css translate来移动对象。我希望您能帮助我修复我的代码，所有旋转都发生在滚动上，以下是我的代码： <html> <head> <style> body { height: 20000px; }

我在滚动的圆形路径中移动一个对象时遇到了问题，该对象一直以之字形移动。我不知道如何解决这个问题，我认为我的公式不正确。我使用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>


正文{
高度：20000像素；
}
塔兹先生{
宽度：50px；
高度：50px；
背景：#F00；
位置：固定；
}
$（文档）.ready（函数（）{
window.objYFlag=“down”；
window.objXFlag=“右”；
window.objY=0；
window.objX=50；
window.objYMax=50；
window.objXMax=50；
$（窗口）。滚动（函数（）{
var scroll=$（document.scrollTop（）；
window.objX=（50-（window.objY-滚动）+window.objX）；
//x的公式
if（window.objY===window.objYMax）{
window.objYFlag=“向上”；
}
if（window.objY==0）{
window.objYFlag=“down”；
}
如果（window.objYFlag==“向下”）{
window.objY=window.objY+1；
}否则{
window.objY=window.objY-1；
}
console.log（window.objX+''+window.objY）；
$（'.tarz'）.css（'transform'，'translate（'+window.objX+'px'，+window.objY+'px'））；
});
});

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

是时候回顾一下你的三角学了。这是你想要完成的吗

 $(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)');
 });

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

hmm，谢谢你的解决方案，嗯，但是用我的代码有什么方法可以让它移动吗？谢谢@BlazemongerI，老实说，我不知道你想用你的原始代码做什么。当我运行它时，盒子向右滑动，再也没有出现过。

$（'.tarz:last'）.clone（）.css（'transform'，'translate（'+window.objX+'px'，+window.objY+'px'）））insertAfter（'.tarz:last'）

只是为了好玩=）@Blazemonger

window.objX=（50-（window.objY-scroll）/window.objX）试试这个，但它是对角的，先生。