Question

第二次编辑： 好的，所以我肯定在这里遇到了一些关于这个问题的帮助，但是当我现在将工作模型输入到我的页面中的类结构中时，就是休息并且无法找到方法。我试过缓存＆＃34;这个＆＃34;为了看到我的方法然而我没有运气......

新JS小提琴：http://jsfiddle.net/goredefex/3QvP9/22/

另外，我知道JS Fiddle不能使用类，因为当我检查它时，我可以看到它自动添加$（function（）{}）;没有我的控制加载事件。

新JS代码（所有其他代码完全相同）：

$(function() {                              
    var m = new ImgMarquee("#box");
});

function ImgMarquee(container) {
    this.setUpImages(container);
    var total = this.findAndSetContWidth(container);

    //Make Second Hidden Stage
    var doppelganger = $(container).clone();                
    $(container).first().append(doppelganger.html()); //<-- Add In Stage

    this.animateMarquee(this.animateMarquee, container, total);

} //EOC

//Calculates Width & Sets Viewer
ImgMarquee.prototype.findAndSetContWidth = function(container) {
    //Set Parameters
    var imgs = $(container + " a img"),
        width = 0;
    //Calculate Width
    $(String(container)).find(imgs).each(function() {
        width += $(this).width();
    });
    //Set Container Width
    $(container).css({"width":String(width*2)});

    return width;

}; //end function

//Adjusts Height Of Images To Parent Container
ImgMarquee.prototype.setUpImages = function(container) {
    var imgs = $(container + " a img"), 
        gutter = 3;
    //Attach To All Given Images
    $(String(container)).find(imgs).each(function() {
        $(this).css({
            "max-height":String($(this).parent().parent().height())+"px",
            "padding-right":String(gutter)
        });
    });

}; //end function

//Adds JQuery Animation To Container
ImgMarquee.prototype.animateMarquee = function(recursion, c, t) {
    $(c).animate({'margin-left':String(-(t))}, 
        {
            easing:'linear',
            duration:50000,
            complete: function() {
                $(c).css({"margin-left":"0"});
                this.animateMarquee(this.animateMarquee, c, t);
            }
         }
    );
}; //end function

这是原始问题： Haven还没有找到答案，我想知道我做错了什么。我有一个动画功能来制作一个愚蠢的图像选框滚动条，我唯一能做的就是图像从DOM (x < 0px)上的可见x轴上掉落并移回自身的部分在最右边的x轴顶部的线的前面。

换句话说，它会在幕后移动到隐藏的右侧，等待进入用户可以看到它的舞台。

我想要的只是一个简单的无限卷轴，并且慢慢地显示我集合中的所有图像。

第一次编辑 - 现在没有：按要求添加了JS-Fiddle [这里]：http://jsfiddle.net/goredefex/3QvP9/

这是我的代码......

HTML：

    <div id="backing">
        <div id="box">
            <img class="img" src="img/x.png" />
            <img class="img" src="img/y.png" />
            <img class="img" src="img/z.png" />
            <img class="img" src="img/1.png" />
            <img class="img" src="img/2.png" />
            <img class="img" src="img/3.png" />
            <img class="img" src="img/x.png" />
            <img class="img" src="img/y.png" />
            <img class="img" src="img/z.png" />
            <img class="img" src="img/1.png" />
            <img class="img" src="img/2.png" />
            <img class="img" src="img/3.png" />
        </div>
    </div>

    <button id="btn">GO!</button>

CSS：

        #backing{
            height: 55px;
            width: 800px;
            background-color: black;
            color: white;
            position: relative;
            overflow-x: hidden;
        }

        #box{
            height: 55px;
            width: 3000px;
            position: absolute;
        }

        #box img {
            float: left;
            opacity: .6;
        }

        #box img:hover {
            opacity: 1;
        }

JS：

    $(function() {                              
        $("#btn").on("click", function() {                  

                var total = setMarqueeAndSum(".img");                   

                //Animation
                launchMarquee(total, ".img");

            });
        });

        function setMarqueeAndSum(iClass) {
            //Keep Track of Positions
            var lPos = 0, 
                gutter = 3;
            //Attach To All Given Images
            $(String(iClass)).each(function() {
                $(this).css({
                    "max-height":String($(this).parent().height())+"px",
                    "position":"absolute", 
                    "top":"0px", 
                    "left":function() {
                        return lPos==0 ? "0px":String(lPos + gutter) + "px";
                    }
                });
                lPos = lPos + $(this).width() + gutter;
            });

            return lPos;

        } //end function

        function launchMarquee(t, iClass) {
            $(iClass).animate({left:'-='+String(t)+'px'}, 
                {
                    easing:'linear',
                    duration:40000,
                    step:function(now, fx) {
                        var cache = t;
                        if($(this).position().left<(0-$(this).width()))
                            $(this).css({"left":String(cache)+"px"});
                    },
                    complete: function() {launchMarquee(t);}
                 }
            );
        } //end function

Answer 1

总是有很多方法可以做这些事情，但这是我首先想到的：

复制图像。
将它们中途动画（它们仅仅是为了无限的幻觉）。
通过设置适当的css（margin-left：0）立即回滚动画。

重复这些步骤。

$(function() {                              
$("#btn").on("click", function() {                  

    $(this).attr("disabled", "disabled"); // Disable the button after click

    var $box  = $("#box"),
        total = 0;

    // Make box width equal to imgs summed up (not wider than that)
    $box.find("img").each(function(){
        total += $(this).width();
    });
    $box.css("width", total);
    console.log("The '.box' width is ", total);

    setImgs($box); // Set css propertes of an image here

    var $box_copy = $box.clone(); // Copy the imgs...
    $("#box").first().append($box_copy.html()); // ... and append them (basically duplicate all images)

    animate(animate, $box, total);
});

function setImgs(parent) {
    parent.find("img").each(function()
    {
        $(this).css({ 
            "max-height": "50px",
        });
    });
}

function animate(callback, $box, total)
{
    $box.animate({
        "margin-left" : -total / 2
    }, 10000, "linear", function(){
        $box.css("margin-left", "0"); // Roll back the animation instanly by setting margin to 0
        animate(animate, $box, total); // Then animate again...
    });
}
});

这是一个小提琴：http://jsfiddle.net/3QvP9/16/

重要提示：不要同时为每个图像设置动画，jus为其容器设置动画。拯救地球，不要杀死浏览器。

JQuery Animate函数不改变左绝对位置

1 个答案: