jQuery动画图像从左到右
jQuery to animate image from left to right?
我有一个蜜蜂的图像,我想用jQuery给它添加动画。
这个想法是将图像从左(屏幕外)移动到右(屏幕外),以创造一种像飞行一样的效果。
你的蜜蜂需要绝对定位,像这样:
<div id="b" style="position:absolute; top:50px">B</div>
我在这里使用了一个div,但它也可以是一个<img>
标记。正如meo指出的,不要忘记top
属性,因为有些浏览器没有它就无法工作。然后你可以把它做成动画:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
这是一个jsfiddle演示。
如果你想要一个连续的动画,就像Hira指出的那样,把动画代码放在函数中,确保左右移动相同,并使用animate()的onComplete选项来调用下一个动画:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
还有小提琴
试试:http://spritely.net/
我会这样做: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
});
小心,这段代码只适用于:p
如果你想让蜜蜂一直飞过屏幕,试试这个:-)
<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>
<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
>
<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`
相关文章:
- 框从左到右自动隐藏
- 如何告诉D3使树状图垂直(自上而下),而不是从左到右
- 使用CSS/JS从左到右堆叠框
- 从上到下,从左到右更改图像的加载
- 统一呈现高图表.js图表,而不是从左到右
- 从左到右移动对象
- 如何在HTML中加载图像,例如iPad网站从左到右滑动
- 使用jquery在连续循环中从左到右的文本动画
- jQuery动画-使图像从左到右可见
- 文本中从左到右褪色的问题
- 缓慢淡入或从左到右加载带有加载后延迟的图像
- 文本下划线动画从左到右
- 从左到右为SVG制作动画
- 我如何移动一个图像从左到右和从右到左在javascript无限的时间
- 如何用滑动效果从左到右滑动文本和图像
- 使用jquery从左到右显示图像
- jQuery动画图像从左到右
- 如何使用jquery从左到右或从右到左滑动图像
- 移动图像从左到右javascript
- 在画布上的某个特定位置,从左到右缓慢地绘制图像