Fatal编程技术网
  • javascript/
  • Javascript jQuery从左到右设置图像动画？

Javascript jQuery从左到右设置图像动画？

javascript jquery animation

Javascript jQuery从左到右设置图像动画？,javascript,jquery,animation,Javascript,Jquery,Animation,我有一个蜜蜂图像，我想用jQuery设置它的动画 其想法是将图像从左侧（屏幕外）移动到右侧（屏幕外），以创建像飞行一样的效果 您的蜜蜂需要绝对定位，如下所示： <div id="b" style="position:absolute; top:50px">B</div> 这是一个JSFIDLE演示 如果要像Hira指出的那样拥有连续动画，请将动画代码放入函数中，确保左右移动相同，并使用animate（）的onComplete选项调用下一个动画： function bee

我有一个蜜蜂图像，我想用jQuery设置它的动画

其想法是将图像从左侧（屏幕外）移动到右侧（屏幕外），以创建像飞行一样的效果

您的蜜蜂需要绝对定位，如下所示：

<div id="b" style="position:absolute; top:50px">B</div>
这是一个JSFIDLE演示

如果要像Hira指出的那样拥有连续动画，请将动画代码放入函数中，确保左右移动相同，并使用animate（）的onComplete选项调用下一个动画：

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

beeRight();
而最重要的是。

试试斯普里利：

我会这样做：

蜜蜂小心，此代码仅适用于蜜蜂的：p

如果您希望蜜蜂继续在屏幕上飞行，请尝试此：-）


函数animateImage（）{
控制台日志（“调用”）；
$（'bee'）.css（{右：'10%}）；
$（#bee'）.animate（{right:'-100%}，5000，'linear'，function（）{animateImage（）；}）；
}
$（文档）.ready（函数（）{
动画图像（）；
}); 



$（文档）.ready（函数（）{
函数rgt（）{
$（'sldr'）。动画（{左：“500”}，10000，隐藏）；
}
rgt（）；
函数hider（）{
$（'sldr'）.css（'left'，'0px'）；
rgt（）；
}
});


$（文档）.ready（函数（）{
var k=$（window.width（）；
函数rgt（）{
$（'sldl'）。隐藏（1）；
$（'sldr'）。动画（{左：“1000”}，10000，隐藏）；
}
rgt（）；
函数hider（）{
$（'sldr'）.css（'left'，'0px'）；
$（'sldr'）.hide（1）；
$（'sldl'）.show（）；
lft（）；
}
函数lft（）{
$（'sldl'）。动画（{左：“0”}，10000，隐藏）；
}
函数hidel（）{
$（'sldl'）.css（'left'，'1000px'）；
$（'sldr'）.show（）；
rgt（）；
}
});
`在这里输入代码`

不幸的是，jQuery仅对蜜蜂和鸟类不起作用。看看jQuery站点，有一个关于动画功能的相当不错的文档，以及如何使用鸟类来完成这类事情！别忘了提供一个顶部位置，以避免在浏览器中出现意外行为（我没有提到：），但它只会设置一次动画，没有连续的运动。@meo，你说得对，非常好。我只是想把工作量减到最少。我希望蜜蜂会被放置在顶部以及其他一些东西（背景，如果喷泉等）。@Hira，这是正确的。我并没有假设安德烈想要连续的动画。但这很简单：只需将动画代码粘贴在setInterval中，然后确保+和-值相同。我将更新它以包含这两个点。+您可以在第二个动画的回调中打包调用bee函数，因此您可以确定动画已完成。。。JS中的计时不太精确…此代码用于连续从左向右移动图像而不产生任何失真。此代码用于两个图像，一个图像不同时从左向右和从右向左移动。当左侧的图像（第一个图像）在再次回到起始位置后向右移动，第一个图像将隐藏。现在，右侧的图像将隐藏（第二幅图像）ti现在它的隐藏将显示并开始向左移动，并在它到达左位置后隐藏，然后再次返回到起始位置并重复该过程）直到第一幅图像隐藏后才显示

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

beeRight();



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



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