如何使太阳的弧线停留在页面的左端? [英] How do I make the arc of the sun stop at the left end of the page?

问题描述

我使太阳可成弧形拖拽，但我希望弧形停在某个点，在这种情况下，即页面的左端.现在，它永远持续在左侧，但我希望它停止.我该怎么办?

I made the sun draggable in an arc, but I want the arc to stop at a certain point which in this case, is the left end of the page. Right now it goes on forever on the left, but I want it to stop. How can I do that?

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">

推荐答案

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

Set the containment option to body (or some other container) in your draggable definition, and hide the x-overflow on body in your CSS:

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">

这篇关于如何使太阳的弧线停留在页面的左端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！