jQuery从左到右动画图像？
[英]jQuery to animate image from left to right?
问题描述
I have a Bee image and I want to animate it using jQuery. 
我有一个Bee图像，我想使用jQuery为它设置动画。
The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying. 我们的想法是将图像从左侧（屏幕外）移动到右侧（屏幕外），以创建像飞行一样的效果。
6 个解决方案
解决方案1
25 已采纳 2011-10-31 18:39:47
Your bee needs to be absolutely positioned, something like this: 你的蜜蜂需要绝对定位，如下所示：
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img> tag. 我在这里使用了div，但它也可以是<img>标签。 As meo pointed out, don't forget the top attribute, because some browsers don't work without it. 正如meo指出的那样，不要忘记top属性，因为有些浏览器没有它就无法工作。 Then you can animate it: 然后你可以动画它：
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here is a jsfiddle demo. 这是一个jsfiddle演示。
If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation: 如果你希望Hira指出连续动画，将动画代码放在函数中，确保左右移动相同，并使用animate（）的onComplete选项调用下一个动画：
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
解决方案2
7 2011-10-31 18:41:50
尝试精灵： http ：//spritely.net/
解决方案3
4 2011-10-31 19:05:58
i would do something like this: http://jsfiddle.net/Uwuwj/2/ 我会做这样的事情： http ： //jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
bee careful, this code only works with bee's :P 蜜蜂小心，这段代码只适用于蜜蜂：P
解决方案4
1 2011-10-31 19:07:00
In case you want the bee to keep flying across the screen, try this :-) 如果您希望蜜蜂在屏幕上飞行，请尝试以下方法:-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
解决方案5
0 2014-09-23 07:23:40
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
> >
解决方案6
0 2014-09-23 08:15:02
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.