jQuery幕布卷轴应用程序

Question

我试图建立一个窗帘滑块 - 就像Apple网站上使用的那样 - http://www.apple.com/30-years/

http://jsfiddle.net/NYEaX/405/

我创建了以下代码 - 我需要添加侦听器来检测鼠标悬停在页面的最左侧/最右侧 - 然后调用指数幻灯片。

var curtainSlider = {
    invoke: function(el){
         var that = this;

         var list = $(el + " ul").find("li");
         this.initialListWidth = list.outerWidth(true);

        list
            .mouseover(function() {
                console.log("over"); 
                that.expand(this);
            })
            .mouseout(function() {
                console.log("out");
                that.contract(this);
            });         
    },
    expand: function(el){
        var that = this;

        $(el).stop().animate({
            width: that.initialListWidth*2
        },400, function() {
            // Animation complete.
        });
    },
    contract: function(el){
        var that = this;

        $(el).stop().animate({
            width: that.initialListWidth
        },400, function() {
            // Animation complete.
        });
    }

}


$(document).ready(function() {
    console.log( "ready!" );

    curtainSlider.invoke("#curtain");
});

Answer 1

**最新代码 - 完全整合 - http://jsfiddle.net/NYEaX/538/ **

我已经稳定了这个版本的卷轴。 - 这会使图像和光谱在启动时消失。它重新定位了一个元素，使图像更加集中对齐。

http://jsfiddle.net/NYEaX/432/

我已经将负责移动滑块单元的代码分离出来，加速/减速。我希望现在关注的这部分应用程序。

http://jsfiddle.net/NYEaX/434/

我试图将pagex变量推送到动画部分，以帮助操纵动画的持续时间。如何稳定/改善这一点。我发现很难对苹果30年的滑块进行逆向工程。

var curtainSlider = {
    bindEvents: function(){
        var that = this;    
        $("body").on("mousemove",function(event) {
            if (event.pageX < 50) {
                // animate curtain left
                console.log("curtain left");
                that.scroll("l", event.pageX);
            }

            if (event.pageX > (window.width - 50)) {
                // animate curtain right
                console.log("curtain right");                
                that.scroll("r", window.width - event.pageX);
            }
        });    

    },
    scroll: function(direction, leveler){
        var charge = "-";
        if(direction == "r"){
            charge = "+";
        }

        $('#curtainholder #slider').animate({
            left: charge+"="+leveler
        },400, function() {
            // Animation complete.
        });
    },
    invoke: function(el){
         var that = this;
        this.bindEvents();
    }
}


$(document).ready(function() {
    curtainSlider.invoke("#curtain");
});