jQuery從左至右對圖像進行動畫處理？

我有一個蜜蜂圖像，我想用jQuery爲它製作動畫。jQuery從左至右對圖像進行動畫處理？

這個想法是將圖像從左邊（屏幕外）移動到右邊（屏幕外）以創建一個效果，就像飛行一樣。

2011-10-31 Andrei

+11

不幸的jQuery不會對蜜蜂的工作，鳥類。看看jQuery網站，關於動畫功能還有一個相當不錯的文檔，以及如何完成這種事情，對鳥來說！ – adeneo

你的蜜蜂必須絕對定位，是這樣的：

<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); 
});

Here是的jsfiddle演示。

如果您希望Hira指出連續動畫，請將動畫代碼放入函數中，確保左右移動相同，並使用animate（）的onComplete選項調用下一個動畫：

function beeLeft() { 
    $("#b").animate({left: "-=500"}, 2000, "swing", beeRight); 
} 
function beeRight() { 
    $("#b").animate({left: "+=500"}, 2000, "swing", beeLeft); 
} 

beeRight();

而fiddle就是這樣。

來源

2011-10-31 18:39:47 Donamite

不要忘記提供一個頂級位置，以避免瀏覽器中出現意外的行爲，我不提:) :) – meo

但它只會動畫一次無連續動作。 –

@meo，對吧，非常好。我只是想盡量減少工作量。我期望蜜蜂將被定位在頂部以及其他一些東西（背景，如果是精靈等）。 – Donamite

嘗試興致：http://spritely.net/

來源

2011-10-31 18:41:50 Aknosis

這真是矯枉過正。 –

我會做這樣的事情： 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

來源

2011-10-31 19:05:58 meo

如果你想要的蜜蜂繼續飛過屏幕，試試這個:-)

<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>

只有10

來源

2011-10-31 19:07:00 legendofawesomeness

<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

來源

2014-09-23 07:23:40 rakesh

此代碼用於連續移動圖像從左到右連續不失真 – rakesh

<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`

來源

2014-09-23 08:15:02 rakesh

這一個針對兩個圖像的移動從左到右和從右到左不是一次。當左側圖像（第1圖像）再次移動到右側後回到起始位置，第一張圖像將隱藏。現在在右側圖像（第二張圖像）現在，其隱藏的圖像將顯示並開始向左移動，並在到達左側位置後隱藏起來，並且再次回到開始位置位置和過程重複）那直到第一個圖像隱藏不顯示 – rakesh

jQuery從左至右對圖像進行動畫處理？

回答

相關問題