javascript - 如何让太阳的弧线停在页面的左端？

Question

我让太阳在弧形中可拖动，但我希望弧形停止在某个点，在本例中，该点是页面的左端。现在它永远在左边，但我想让它停下来。我该怎么做？

var width = 300;
var sun = $("#sun");

sun.draggable({
  axis: "x",
  drag: function() {
    var x = sun.offset().left + (width / 2);
    var total = $(window).width();

    var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);
    console.log(x, $(window).width(), heightPct * 100);
    this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
  }
});

/* Colors */

body {
  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;
}
@keyframes mymove {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 40% 0;
  }
}
#dark_sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}
#sun {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 20%;
  left: 10%;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">

Answer 1

设置containment option到 body (或其他一些容器)在你的 draggable 定义中，并在你的 CSS 中隐藏 body 上的 x-overflow:

var width = 300;
var sun = $("#sun");

sun.draggable({
  axis: "x",
  containment: 'body',
  drag: function() {
    var x = sun.offset().left + (sun.width() / 2);
    var total = $(window).width();

    var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);
    console.log(x, $(window).width(), heightPct * 100);
    this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
  }
});

/* Colors */

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

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">