jQuery to animate image from left to right?

2楼-- · 2019-01-22 03:58

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

0人赞添加讨论(0) 举报

趁早两清

3楼-- · 2019-01-22 04:06

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>

0人赞添加讨论(0) 举报

The star\"

4楼-- · 2019-01-22 04:07

Try spritely: http://spritely.net/

0人赞添加讨论(0) 举报

Viruses.

5楼-- · 2019-01-22 04:09

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. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:

$(document).ready(function() {
    $("#b").animate({left: "+=500"}, 2000);
    $("#b").animate({left: "-=300"}, 1000);
});

Here is a jsfiddle demo.

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:

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

beeRight();

And the fiddle for that.

0人赞添加讨论(0) 举报

男人必须洒脱

6楼-- · 2019-01-22 04:09

i would do something like this: 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

0人赞添加讨论(0) 举报

我想做一个坏孩纸

7楼-- · 2019-01-22 04:14

 <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

>

0人赞添加讨论(0) 举报

jQuery to animate image from left to right?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间