这是我的“程序”代码。拖动太阳的 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>
最佳答案
我认为这里有一个非常漂亮的弧线运动，它基于圆公式。您可以通过更改公式中的变量来更改弧线。告诉我你的想法。
现场演示:
$("#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";
}
});/* 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%;
}<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">JSFiddle 版本:https://jsfiddle.net/on1z6q0z/3/
关于javascript - 以弧形拖动元素的最简单方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32926245/