我一直在努力寻找答案，但到目前为止我所做的一切都没有奏效。我只想在拖动时将“太阳”图像转换或变形为“黑暗太阳”图像。如果有人有解决方案或知道为什么我的代码不起作用，请告诉我。谢谢。如果有人需要引用，这是我的“程序”URL: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>
最佳答案
我对您的代码段进行了一些更改，希望这是您的预期结果。
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 -->关于javascript - 如何在拖动时将第一个太阳变形为黑暗的太阳？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33201341/