Question

我正在从左到右移动屏幕上的gif并再次返回。由于我想为一个正在运行的人设置动画，我需要在屏幕结束时始终更改图片。谁能帮我这个？

我是JS的新手。

＆＃13;

$(document).ready(function() {

function runningLeft() {
    $("#run").animate({left: "-=300"}, 1500, "swing", runningRight);
}

function runningRight() {
    $("#run").animate({left: "+=300"}, 1500, "swing", runningLeft);
}

runningRight();});

＆＃13;

#run {position:absolute;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="run"><img src="https://media.giphy.com/media/vMIQqpANOmAaQ/giphy.gif"/></div>

＆＃13;

BR SEB

Answer 1

追加并删除图片作为背景属性。

＆＃13;

$(document).ready(function() {

var imageUrl1 = "image 1 URL";

var imageUrl2 = "Image 2 URL";

function runningLeft() {
$("#run").css("background","");
    $("#run").css("background",function(){
   return "url("+imageUrl1+") center top no-repeat";
});
    $("#run").animate({left: "-=300"}, 1500, "swing", runningRight);
}

function runningRight() {
$("#run").css("background","");
    $("#run").css("background",function(){
   return "url("+imageUrl2+") center top no-repeat";
});
    $("#run").animate({left: "+=300"}, 1500, "swing", runningLeft);
}

runningRight();
});

＆＃13;

#run {position:absolute;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="run"></div>

＆＃13;

JS在屏幕上移动图像并在最后加载另一个图像

1 个答案: