Question

这是我的＆＃34;程序＆＃34;的代码。拖动太阳的jQuery位于最底层。太阳是一个形象。在弧形中拖动太阳的最简单方法是什么？

    <style>
        /* Colors */
        body {
             /*clouds*/
             background: url(http://i.imgur.com/aZty7Mq.png);
             animation: mymove 4s linear infinite;
             -webkit-animation: mymove 4s linear infinite;
             -moz-animation: mymove 4s linear infinite;
        }
        /*cloud animation*/
        @keyframes mymove {
            0% { background-position: 0 0; }
            50% { background-position: 40% 0; }
        }
        #sun {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 30%;
            left: 10%;
        }
    </style>

    <html>
    <body>
            <img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
    </body>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    /*sun dragged in a line*/
        $(document).ready(function() {
            $("#sun").draggable({axis: "x"});
        });
    </script>
    </html>

Answer 1

我想我在这里有一个非常漂亮的电弧动作，它基于一个圆形公式。您可以通过更改公式中的变量来更改弧。告诉我你的想法。

现场演示：

＆＃13;

$("#sun").draggable({
    axis: "x",
    drag: function() {
        var xpos = parseFloat(this.style.left, 10) - 200;
        var ypos = Math.sqrt(300 * 300 - xpos * xpos) * 0.75;
        this.style["margin-top"] = (-ypos) + "px";
    }
});

＆＃13;

/* Colors */
 body {
    /*clouds*/
    background: url(https://i.imgur.com/aZty7Mq.png);
    animation: mymove 4s linear infinite;
    -webkit-animation: mymove 4s linear infinite;
    -moz-animation: mymove 4s linear infinite;
    overflow: hidden;
}
/*cloud animation*/
 @keyframes mymove {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 40% 0;
    }
}
#sun {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 30%;
    left: 10%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<img id="sun" src="https://i.imgur.com/DGkZYZQ.png">

＆＃13;

JSFiddle版本：https://jsfiddle.net/on1z6q0z/3/

在弧中拖动元素的最简单方法是什么？

1 个答案: