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

我一直在试图找到答案无处不在，迄今为止我没有尝试过一直在工作。我只想在拖动时将“太阳”图像转换或变形为“黑暗的太阳”图像。如果任何人有解决方案或有一个想法，为什么我的代码无法正常工作，请让我知道。谢谢。这是我的“程序”网址，如果有人需要参考它：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%; 
     } 
     .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>

来源

2015-10-18 Muniza Siddiqui

你不能让一个CSS动画改变了灿烂的阳光的透明度？ – tom

我建议你使用HTML5，http：//www.kryogenix.org/code/browser/custom-drag-image.html –

@username_unavailable我听说可以是一个解决方案，但我不知道我怎么能拖“黑暗的太阳”图像和“太阳”图像一起。 –

我没有在你的代码段的一些变化，我希望这是你预期的结果。

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

来源

2015-10-18 18:50:54

你可以把你的修改在这里：https://gist.github.com/smuniza1/953d51af9234bc1051ca 对不起，这对我来说更容易看到，因为一切都在一起，而不是分开。 –

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

回答

相关问题