Question

有没有办法可以在拖动时将太阳转换为另一个图像？如果是这样，它应该使用什么语言？我想把太阳转换到另一个黑暗的太阳，当我拖动它时，它会转变为月亮。现在我能够将太阳拖成弧形。 http://whatisupson.tumblr.com/

这是我的代码：

    <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%;
        }
    </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",
        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) + "%";
        }
    });
    </script>
    </html>

Answer 1

试试这个https://jsfiddle.net/twfegqgc/3/

我在元素上使用背景颜色，颜色在元素位置上发生变化。因此，当元素通过窗口的一半并且到达窗口的末端时，颜色会发生变化。您可以设置图像更改，但原则相同。

JS

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

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) + "%";
        }
    });

$("#sun").bind("drag", function(event, ui) {
    var halfWidth = $(window).width() / 2;
    var left = $(this).offset().left + 100;
    var windowWIdth = $(window).width() - 200;
    var color = $('.color');

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

    if(left < halfWidth) {
        color.css('background', 'yellow');
    }

    if(left > halfWidth) {
        color.css('background', 'red');
    } 

     if (left > windowWIdth) {
        color.css('background', 'black');
    }

});

HTML

<div id="sun" class="color"></div>
<div class="position"></div>
<div class="window"></div>

CSS

    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: 100px;
        height: 100px;
        top: 20%;
        left: 10%;
        border-radius: 100px;
    }

    .color {
        background: yellow;
    }

<强>更新

使用background-image https://jsfiddle.net/twfegqgc/4/

更新了版本

在拖动图像/元素时，将图像/元素转换为另一个图像/元素的最简单方法是什么？

1 个答案: