Javascript原型工作

时间:2014-02-07 07:27:53

标签: javascript jquery

我有HTML应用程序,有人为用于滚动的JavaScript编写了javascript库。现在我想滚动到该库的特定div,我不必使用location.href或`location.hash``我必须使用JS库执行此操作,代码是这样的。

var ScrollPage = BGBiRepScroller.ScrollPage = function(){

    this.animationFunList = [];
}
    ScrollPage.prototype = {
    $el:null,
    $sectionList:null,
    sectionPositionsY:null,
    startTouchY:0,
    startScrollY:0,
    initTop:0,
    endTouchY:0,
    endDistance:0,
    acceleration:8,
    containerHeight:600,
    currentSectionIndex:0,
    isScrolling:false,
    snapSection:true,
    create: function($tEl){
        this.$el = $tEl;
        this.sectionPositionsY = new Array();
        this.$sectionList = this.$el.find(".scrollSection");
        var $origParent = this.$el.parent();
        var $tempHolder = $("<div></div>");
        $("body").append($tempHolder);
        $tempHolder.css("opacity",0);
        $tempHolder.append(this.$el);
        this.$el.transition({ y: 0},0);
        if(this.$sectionList.length>0){
            this.initTop = this.$sectionList.position().top;
            console.log("this.initTop::" + this.initTop);

            for(var i=0; i<this.$sectionList.length; i++){
                      this.sectionPositionsY.push($(this.$sectionList[i]).position().top);
                    console.log($(this.$sectionList[i]).position().top);
            }
        }
        $origParent.prepend(this.$el);
        $tempHolder.remove();
        this.createTouchEvents();
    },
    createTouchEvents: function(){
        if(this.$el){
            this.$el[0].ScrollPage = this;
            this.$el.on(BGBiRep.Events.TOUCH_START,   this._onTouchStart);
            this.$el.on(BGBiRep.Events.TOUCH_END, this._onTouchEnd);
            if(BGBiRep.isTouchDevice){
                this.$el.on(BGBiRep.Events.TOUCH_MOVE, this._onTouchMove);
            }

        }
    },
    getSnapToY: function(_y){
        var middleY = _y - this.containerHeight*.5;
        if(this.snapSection){
            for(var i=0; i<this.$sectionList.length; i++){
                var $_currentEl = $(this.$sectionList[i]),
                elTop = this.sectionPositionsY[i]-this.initTop;
                if(-middleY<elTop){
                    //console.log('getSnapToY: middleY::' + middleY + ' ::elTop::' + elTop + ' ::this.initTop::' + this.initTop);
                    return 0;
                }else if((-middleY>=elTop && -middleY<=elTop+$_currentEl.height()+10) || i==this.$sectionList.length-1){
                    //console.log("entering :: " + i);
                    this.currentSectionIndex = i;
                    if(i==0){return 0;}
                    return  -(elTop - (this.containerHeight - $_currentEl.height())*.5);
                }
            }
        }else{
            console.log('_y::' + _y);
            if(_y<-this.$el.find(".col1").height() + 550){
                return -this.$el.find(".col1").height()+550;
            }else if(_y>0){
                return 0;   
            }else{
                return _y;  
            }
        }
        return 0;
    },
    addAnimation: function(_sectionName, _function){
        this.animationFunList.push(new Array(_sectionName, _function));
    },
    getAnimation: function(_sectionName){
        for(var i=0; i<this.animationFunList.length; i++){
            if(this.animationFunList[i][0] == _sectionName){
                return  this.animationFunList[i][1];
            }
        }
    },
    stopTransition: function(){
        this.$el.css("transition", "transform 0s");
        this.$el.css("-webkit-transition", "transform 0s");
    },
    _onTouchStart: function(event, touch){
        var touch ;
        this.ScrollPage.isScrolling = true;
        if(BGBiRep.isTouchDevice){
             touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
        }
        var transformY = parseFloat(String(this.ScrollPage.$el.css('translate')).split(',')[1]) ;
        this.ScrollPage.startTouchY = this.ScrollPage.endTouchY = (BGBiRep.isTouchDevice) ? touch.pageY : event.pageY;
        this.ScrollPage.startScrollY = transformY;
        if(!BGBiRep.isTouchDevice){
            this.ScrollPage.$el.on(BGBiRep.Events.TOUCH_MOVE, this.ScrollPage._onTouchMove);
        }
        this.ScrollPage.stopTransition();
        //this.ScrollPage.$el.css('-webkit-transition', '');
        //this.ScrollPage.$el.css('transition', '');

    },
    _onTouchMove: function(event){


        event.preventDefault();
        var touch ;
                    this.ScrollPage.isScrolling = true;

        if(BGBiRep.isTouchDevice){
             touch = event.originalEvent.targetTouches[0];
        }
        var tY = (BGBiRep.isTouchDevice) ? touch.pageY : event.pageY;
        var transY = this.ScrollPage.startScrollY - (this.ScrollPage.startTouchY - tY);
        var maxY = (this.ScrollPage.snapSection)?(-this.ScrollPage.sectionPositionsY[this.ScrollPage.$sectionList.length-1]+this.ScrollPage.initTop):-this.ScrollPage.$el.find(".col1").height() + 580;
        if(this.ScrollPage.currentSectionIndex == 0 && transY>0){
            transY=0;
        }else if(this.ScrollPage.currentSectionIndex == this.ScrollPage.$sectionList.length-1 && transY<maxY){
            transY = maxY;
        }else if(!this.ScrollPage.snapSection && transY<maxY){
            transY = maxY;
        }
        this.ScrollPage.$el.transition({ y: transY},0);
        this.ScrollPage.endDistance = this.ScrollPage.endTouchY-tY;
        this.ScrollPage.endTouchY = tY;

    },
    _onTouchEnd: function(event, touch){
        if(!BGBiRep.isTouchDevice){
            this.ScrollPage.$el.off(BGBiRep.Events.TOUCH_MOVE, this.ScrollPage._onTouchMove);
        }
        if(this.ScrollPage.isScrolling){

            var newY =  this.ScrollPage.startScrollY - (this.ScrollPage.startTouchY - this.ScrollPage.endTouchY) - this.ScrollPage.endDistance*this.ScrollPage.acceleration;
            console.log("newY::" + newY + "::" + this.ScrollPage.startScrollY + "-" + (this.ScrollPage.startTouchY - this.ScrollPage.endTouchY) + "-" +this.ScrollPage.endDistance*this.ScrollPage.acceleration);

            this.ScrollPage.startScrollY = this.ScrollPage.startTouchY = this.ScrollPage.endTouchY = this.ScrollPage.endDistance=0;
            //console.log("newY::-310::" + this.ScrollPage.getSnapToY(-310));
            var tSCCROLL = this.ScrollPage;

            this.ScrollPage.$el.css('-webkit-transition', '');
            this.ScrollPage.$el.css('transition', '');
            var tSnap =this.ScrollPage.getSnapToY(newY);
            var transformY = parseFloat(String(this.ScrollPage.$el.css('translate')).split(',')[1]) ;
            console.log('tSCCROLL.currentSectionIndex ' +tSCCROLL.currentSectionIndex);
            var tFun = function(){
                var tDid = $(tSCCROLL.$sectionList[tSCCROLL.currentSectionIndex]).attr("data-id");
                console.log('inside tFun');
                if(tDid && tDid!=''){
                    console.log('inside tDid');
                    tSCCROLL.getAnimation(tDid)();
                    console.log(tSCCROLL.getAnimation(tDid));
                }
            }
            if(tSnap!=transformY){
                tFun();
                this.ScrollPage.$el.transition({ y: tSnap}, tFun);
            }
        }
        this.ScrollPage.isScrolling = false;

    }
}

现在点击div部分我想移动到特定部分

$('.purple li').click(function(e) 
{
//SOMETHING 
});

我怎么能实现这一点请有人帮忙

0 个答案:

没有答案