Question

请找到代码，我们面临更改箭头方向的问题，箭头一旦到达屏幕宽度就应该从右向左改变。所需的功能是箭头不应该逆转它必须改变它的方向。

尝试了许多解决方案。

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

Answer 1

鱼的目的地点（左侧和上方位置）拾取时出现问题。第一条鱼正常运作，因为它选择了与自身相对应的目的地点，但其余鱼类也分别将目标点分别放在第一条鱼上。

此处提供了工作样本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");
        });
    });

});

Answer 2

我已经看过它，看起来这是一个愚蠢的错误。你的小提琴显示有些东西正在工作，因为当方向改变时它改变了一些东西，所以基础知识是可以的。你只是忘了里面有一个你想要操纵的图像标签。

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

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

如何动画图像＆amp;从右到左改变方向

2 个答案: