Javascript 如何使用js或jquery使小图像从屏幕的一侧移动到另一侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12712592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a small image move from one side of the screen to the other with js or jquery?
提问by Ed Bayiates
I have a small animated plane which has the sign that says " Welcome to the site " and I want it to move in a loop from left screen to the right. Just come out, then disappear. Now, I know this can been done with JS, but I have no idea. Is it very hard to move one image in JS?
我有一个小型动画飞机，上面标有“欢迎访问该站点”的标志，我希望它从左屏幕到右屏幕循环移动。刚出来，然后消失。现在，我知道这可以用 JS 来完成，但我不知道。在 JS 中移动一张图片很难吗？
回答by Andreas
With the help of .animate()you can animate almost anything
在.animate()您的帮助下，您几乎可以为任何东西制作动画
.animate( properties [, duration ] [, easing ] [, complete ] )
properties
Type: PlainObject
An object of CSS properties and values that the animation will move toward.duration(default:
400)
Type: Numberor String
A string or number determining how long the animation will run.easing(default:
swing)
Type: String
A string indicating which easing function to use for the transition.complete
Type: Function()
A function to call once the animation is complete, called once per matched element.
.animate( 属性 [, 持续时间 ] [, 缓动 ] [, 完整 ] )
properties
类型： PlainObject
动画将移向的 CSS 属性和值的对象。缓和（默认值：
swing）
类型： 字符串
的字符串指示哪个缓和功能以用于转换。complete
类型： Function()
动画完成后调用的函数，每个匹配元素调用一次。
For the loopwe wrap the actual animation part into a named function and pass this as the completecallback. With that the animation will restart once it has finished.
对于循环，我们将实际动画部分包装到一个命名函数中，并将其作为complete回调传递。这样，动画将在完成后重新启动。
$(function() {
var img = $("#plane"),
width = img.get(0).width,
screenWidth = $(window).width(),
duration = 5000;
function animatePlane() {
img.css("left", -width).animate({
"left": screenWidth
}, duration, animatePlane);
}
animatePlane();
});body { overflow: hidden }
#plane { position: absolute; left: -1000px; width: 50% /* <- not relevant for the animation */ }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plane" src="https://cdn.pixabay.com/photo/2018/09/13/10/18/aircraft-3674305_640.png" />
<!-- source: https://pixabay.com/de/flugzeuge-propeller-aircraft-alt-3674305/ -->回答by Ed Bayiates
You can animate anything. My code will animate a div (with an image, or any content you like) across the screen:
你可以为任何东西制作动画。我的代码将在屏幕上为 div（带有图像或您喜欢的任何内容）设置动画：
HTML:
HTML：
<div id="animate">Sample</div>
CSS:
CSS：
#animate {
position: relative;
border; 1px solid green;
background: yellow;
width: 100px;
height: 100px;
}
JavaScript/jQuery code:
JavaScript/jQuery 代码：
$(document).ready(function(e) {
var width = "+=" + $(document).width();
$("#animate").animate({
left: width
}, 5000, function() {
// Animation complete.
});
});
Working JSFiddle here.
在这里工作 JSFiddle 。
You could put anything you wanted in the div. The only important part of the CSS is the "position: relative;" attribute. You could change "#animate" from an id to a class and cause several objects to animate across the screen. jQuery is very versatile.
你可以把任何你想要的东西放在 div 中。CSS 唯一重要的部分是“位置：相对；” 属性。您可以将“#animate”从一个 id 更改为一个类，并使多个对象在屏幕上设置动画。jQuery 非常通用。
If you wanted the animation to roll back from the right to the left again, change the code to:
如果想让动画再次从右向左回滚，将代码改为：
$(document).ready(function(e) {
var width = $(document).width();
function goRight() {
$("#animate").animate({
left: width
}, 5000, function() {
setTimeout(goLeft, 50);
});
}
function goLeft() {
$("#animate").animate({
left: 0
}, 5000, function() {
setTimeout(goRight, 50);
});
}
setTimeout(goRight, 50);
});
Working jsFiddle for that here
在这里工作 jsFiddle
To make the image roll right and disappear forever, do this:
要使图像正确滚动并永远消失，请执行以下操作：
$(document).ready(function(e) {
var width = "+=" + $(document).width();
$("#animate").animate({
left: width
}, 5000, function() {
$("#animate").css("display", "none");
});
});
Working jsFiddle for that here
在这里工作 jsFiddle
回答by himani bisht
Use marquee:
使用选框：
<marquee
`scrollamount="10"`
direction="left"
behavior="scroll">
Welcome to the site
<img src="images/plane.jpg" />
</marquee>
