Question

我一直在努力找到答案，到目前为止我没有尝试过任何工作。我只是希望能够转换或变形＆＃34; sun＆＃34;想象一下＆＃34;黑暗的太阳＆＃34;拖动它时的图像。如果有人有解决方案或想知道为什么我的代码不能正常工作，请告诉我。谢谢。这是我的＆＃34;计划＆＃34;网址，如果有人需要引用它：http://whatisupson.tumblr.com/＆＃34;黑暗的太阳＆＃34;图像是第一个＆＃34; sun＆＃34;此刻的形象。

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

Answer 1

我在您的代码段中做了一些更改，我希望这是您的预期结果。

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 = $('img');                                      //changed to img tag 

    $('.position').html(left);
    $('.window').html(windowWIdth);

    if(left < halfWidth) {
        image.prop('src', 'http://i.imgur.com/f3UFHb7.png');   //changed to prop
    }

    if (left > windowWIdth) {
        image.prop('src', 'http://i.imgur.com/o7cwLDa.png');   //changed to prop
    }
});

/* 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);
        }

<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="sun" src="http://i.imgur.com/DGkZYZQ.png" /> <!-- img tag closed -->

如何拖动它时将第一个太阳变成黑暗的太阳？

1 个答案: