如何製作頁面左端的太陽擋的弧線？

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溢出：

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