Javascript 如何在拖动图元时逐渐降低其不透明性？
在我的程序中，实际上有两个太阳，但是一个太阳又叫“暗太阳”，正好在另一个太阳后面。我希望“太阳”在弧的中间逐渐淡出或逐渐变得不那么不透明（这是我的程序中太阳进入的方向），因此在弧的末端只有“暗太阳”可见。我该怎么做？这是程序URL：Javascript 如何在拖动图元时逐渐降低其不透明性？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在我的程序中，实际上有两个太阳，但是一个太阳又叫“暗太阳”，正好在另一个太阳后面。我希望“太阳”在弧的中间逐渐淡出或逐渐变得不那么不透明（这是我的程序中太阳进入的方向），因此在弧的末端只有“暗太阳”可见。我该怎么做？这是程序URL： /*颜色*/ 身体{ 背景：url(http://i.imgur.com/aZty7Mq.png); 动画：mymove 4s线性无限； -webkit动画：mymove 4s线性无限； -moz动画：mymove 4s线性无限； } @关键帧mymove{ 0
/*颜色*/
身体{
背景：url(http://i.imgur.com/aZty7Mq.png);
动画：mymove 4s线性无限；
-webkit动画：mymove 4s线性无限；
-moz动画：mymove 4s线性无限；
}
@关键帧mymove{
0%{背景位置：0；}
50%{背景位置：40%0；}
}
#阴阳{
位置：绝对位置；
宽度：300px；
高度：300px；
最高：20%；
左：10%；
}
#太阳{
位置：绝对位置；
宽度：300px；
高度：300px；
最高：20%；
左：10%；
}
var宽度=300；
var sun=$（“#sun”）；
var dark=$（“#dark_sun”）
日晒({
轴：“x”，
遏制:"身体",，
拖动：函数（）{
var x=sun.offset（）.left+（sun.width（）/2）；
var total=$（window.width（）；
var heightPct=Math.pow（（总计/2）-x，2）/Math.pow（$（窗口）.width（）/2，2）；
console.log（x，$（window.width（），heightPct*100）；
此.style[“页边距顶部]=“”+数学.round（heightPct*30）+“%”；
dark.css({
左：x-（太阳宽度（）/2），
边际：高度百分比*30+“%”
});
$（this.css）({
边际：高度百分比*30+“%”
});
}
});
还有改进的余地，因为用这种方法太阳永远不会完全不透明。谢谢你，我认为这是完全好的，这正是我想要的。也就是说，我想添加第三个元素，比如月亮，并希望它在弧的最后1/3处可见。我可以用同样的方法吗？是的，应该是这样的，只要你的数学正确，它就会起作用。如果你需要帮助，你可以再问一次。不客气。是的，你能帮我调整一下数学吗？这是我的新代码：月亮现在在两个太阳后面。原始版本在这里，从那里你应该能够解决其余的问题（平滑月亮和太阳之间的变化等等）
<style>
/* 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%;
}
</style>
<html>
<body>
<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
<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>
var width = 300;
var sun = $("#sun");
var dark = $("#dark_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) + "%";
dark.css({
left:x -(sun.width()/2),
marginTop: heightPct * 30 + "%"
});
$(this).css({
marginTop: heightPct * 30 + "%"
});
}
});
</script>
</html>
$(this).css({
opacity: 1-(x/total),
marginTop: heightPct * 30 + "%"
});