Fatal编程技术网
  • javascript/
  • Javascript 如何在拖动第一个太阳时将其变形为暗太阳？

Javascript 如何在拖动第一个太阳时将其变形为暗太阳？

javascript jquery html css

Javascript 如何在拖动第一个太阳时将其变形为暗太阳？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在到处寻找答案，但到目前为止，我所做的任何尝试都没有奏效。我只想能够过渡或变形的“太阳”形象，以“黑暗的太阳”形象，同时拖动它。如果有人有一个解决方案或有一个为什么我的代码不工作的想法，请让我知道。非常感谢。这是我的“程序”URL，如果有人需要参考它：“黑暗的太阳”图片是在第一个“太阳”图片的后面 <style> /* Colors */ body { background: url(http://i.imgur

我一直在到处寻找答案，但到目前为止，我所做的任何尝试都没有奏效。我只想能够过渡或变形的“太阳”形象，以“黑暗的太阳”形象，同时拖动它。如果有人有一个解决方案或有一个为什么我的代码不工作的想法，请让我知道。非常感谢。这是我的“程序”URL，如果有人需要参考它：“黑暗的太阳”图片是在第一个“太阳”图片的后面

    <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; }
        }
        #sun {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 20%;
            left: 10%;
        }
        .image {
            background: url(http://i.imgur.com/DGkZYZQ.png);
        }
    </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>
    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) + "%";
      }
    });
    $("#sun").bind("drag", function(event, ui) {
    var halfWidth = $(window).width() / 2;
    var left = $(this).offset().left + 100;
    var windowWIdth = $(window).width() - 200;
    var image = $('.image');

    $('.position').html(left);
    $('.window').html(windowWIdth);

    if(left < halfWidth) {
        image.css('background-image', url('http://i.imgur.com/f3UFHb7.png'));
    }

    if (left > windowWIdth) {
        image.css('background-image', url('http://i.imgur.com/o7cwLDa.png'));
    }
});
    </script>
    </html>



/*颜色*/
身体{
背景：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%；
}
.形象{
背景：url(http://i.imgur.com/DGkZYZQ.png);
}
var宽度=300；
var sun=$（“#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）+“%”；
}
});
$（“#sun”）.bind（“拖动”），函数（事件，用户界面）{
var halfWidth=$（窗口）.width（）/2；
var left=$（this）.offset（）.left+100；
var windowWIdth=$（window.width（）-200；
var image=$（'.image'）；
$（'.position'）.html（左）；
$（'.window'）.html（windowWIdth）；
if（左<半宽）{
css（'background-image'，url（'http://i.imgur.com/f3UFHb7.png'));
}
如果（左>窗宽）{
css（'background-image'，url（'http://i.imgur.com/o7cwLDa.png'));
}
});
我对您的代码片段做了一些更改，希望这是您预期的结果

var宽度=300；
var sun=$（“#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）+“%”；
}
});
$（“#sun”）.bind（“拖动”），函数（事件，用户界面）{
var halfWidth=$（窗口）.width（）/2；
var left=$（this）.offset（）.left+100；
var windowWIdth=$（window）.width（）-200；
var image=$（'img'）；//更改为img标记
$（'.position'）.html（左）；
$（'.window'）.html（windowWIdth）；
if（左<半宽）{
image.prop（'src'，'http://i.imgur.com/f3UFHb7.png“）；//已更改为道具
}
如果（左>窗宽）{
image.prop（'src'，'http://i.imgur.com/o7cwLDa.png“）；//已更改为道具
}
});

/*颜色*/
身体{
背景：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%；
}
.形象{
背景：url(http://i.imgur.com/DGkZYZQ.png);
}




你不能制作一个CSS动画来改变明亮太阳的不透明度吗？我建议你使用HTML5，@username\u不可用我听说这是一个解决方案，但我不确定如何拖动“黑暗太阳”图像和“太阳”图片放在一起。你能把你的修改放在这里吗：对不起，这对我来说更容易看到，因为所有的东西都在一起，而不是分开。