如何动画图像&从右到左改变方向

how to animate image & change the direction from right to left

本文关键字：图像 从右到左 改变方向 动画 何动画      更新时间：2023-09-26

请找到代码，这是我面临的改变箭头方向的问题，箭头应该改变面对从右到左，一旦它达到屏幕宽度。所需的功能是箭头不应该反向移动，它必须改变其方向。

试了很多人给出解决方案。

http://jsfiddle.net/7xyuqe1k/5/

function AnimateFish() {
        var Fish3 = $("[id^=fish]").not(".HoverFish"),
            theContainer = $("#container"),
            maxLeft = theContainer.width() - Fish3.width() - 50,
            maxTop = theContainer.height() - Fish3.height(),
            leftPos = Math.floor(Math.random() * maxLeft),
            topPos = Math.floor(Math.random() * maxTop) + 100,
            imgRight = "Assets/fish-glow3-right.gif",
            imgLeft = "Assets/fish-glow3.gif";
        /*Get position of the fish*/
        //console.log(Fish3.position().left +" +"+leftPos);
        //alert(Fish3.position().left);
        if ($("[id^=fish]").position().left >= leftPos) {
            $(this).css("background-image", 'url("' + imgRight + '")');
        } else {
            $(this).css("background-image", 'url("' + imgLeft + '")');
        }
        Fish3.animate({
            "left": leftPos,
            "top": topPos
        }, 1800, AnimateFish);
    }

鱼的目的地有问题(左边位置&上)。第一条鱼可以正常工作，因为它选择了相对于自己的目的地，但其他鱼也选择了相对于第一条鱼的目的地，而不是它们自己。

工作示例可在这里获得http://jsfiddle.net/ravinila/7xyuqe1k/26/

 $(document).ready(function(e) {
    var newfishid = 0;
    $('.post-button').click( function(e) {  
        var fish = $("<div/>", {"class":"large-fish fish", "id" : "fish"+(newfishid++)});
        $('#container').append(fish);
        fish.on("anim", function(e){
            var _this = $(this),
            theContainer = $("#container"),
            maxLeft = theContainer.width() - _this.width() - 50,
            maxTop = theContainer.height() - _this.height(),
            leftPos = Math.floor(Math.random() * maxLeft),
            topPos = Math.floor(Math.random() * maxTop) + 100,
            imgLeft = "http://free-icon-download.com/modules/PDdownloads/images/screenshots/free-icon-download_left-arrow-blue.png",
            imgRight = "http://www.newclassicdesign.com/r_arrow.png";
            if (_this.position().left < leftPos) {
                _this.css("background-image", 'url("' + imgRight + '")');
            } else {
                _this.css("background-image", 'url("' + imgLeft + '")');
            }
            _this.animate({
                "left": leftPos,
                "top": topPos
            }, 2500, function(){
                $(this).trigger("anim");
            });
        });
        fish.trigger("anim");
        fish.hover(function(e) {
            $(this).stop();
        }, function(e) {
            $(this).trigger("anim");
        });
    });
});

我看了一下，看起来这是一个愚蠢的错误。你的小提琴显示出有些东西在工作，因为它在方向改变时改变了一些东西，所以基本的是好的。你只是忘记了在你的div里面有一个你想要操作的图像标签。

function AnimateFish() {
    var Fish3 = $("#fish1").not(".HoverFish"),
    theContainer = $("#container"),
    maxLeft = theContainer.width() - Fish3.width() - 50,
    maxTop = theContainer.height() - Fish3.height(),
    leftPos = Math.floor(Math.random() * maxLeft),
    topPos = Math.floor(Math.random() * maxTop) + 100;
    imgRight = "http://www.newclassicdesign.com/r_arrow.png",
    imgLeft = "http://free-icon-download.com/modules/PDdownloads/images/screenshots/free-icon-download_left-arrow-blue.png";

// below here you used $(Fish3), but Fish3 is already a JS object - you don't need to rewrap it. 
// The biggest problem however, is that below that you used '$(this)', which won't work as there
// is no context defined (you're in an if, not a jQuery function). 
// Replacing this with the same Fish3 does the job,
// as it already was a jQuery object anyhow.
// I have also changed your background from an image to red and green for testing purposes.
// As you can see, thats working. However, your image isn't changing.. 
// This is because you have an image inside you wrapper which you aren't changing.
    if (Fish3.position().left >= leftPos) {
        Fish3.css("background", 'green');
// So lets change the image...
        Fish3.find("img").attr("src", imgLeft);
    } else {
        Fish3.css("background", 'red');
// So lets change the image...
        Fish3.find("img").attr("src", imgRight);
    }
    Fish3.animate({
        "left": leftPos,
        "top": topPos
    }, 1800, AnimateFish);
}

查看代码中的注释，看看发生了什么，但是将其复制到您的小提琴中并替换动画函数就可以了。

相关文章：