require,js 在项目中的应用

<script src="js/require.js" data-main="js/main"></script>



//main.js
requirejs.config({
   paths:{
      jquery:'jquery-1.11.1'
   } 
})

requirejs(['jquery','backtop'],function($,backtop){
    $('#backTop').backtop({
         mode:'go'
     })

//new backtop.BackTop($('#backTop'),{
      mode:'move',
      pos:100,
      speed:2000
//})

})

  

//backtop.js
define(['jquery','scrollto'],function($,scrollto){
   function BackTop(el,opts){
        this.opts=$.extend({},BackTop.DEFAULTS,opts);
        this.$el=$(el);

        this.scroll=new scrollto.ScrollTo({
                dest:0,
                speed:this.opts.speed,
        })

        this._checkPosition();
        $(window).on('scroll',$.proxy(this._checkPosition,this));

        if(this.opts.mode=='move'){
             this.$el.on('click',$.proxy(this._move,this));
        }else{
             this.$el.on('click',$.proxy(this._go,this));  
        }
   }




  BackTop.DEFAULTS={
       mode:'move',
       pos:$(window).heigth(),
       speed:800
  }


  BackTop.prototype._move=function(){
       this.scroll.move();
  }

  BackTop.prototype._go=function(){
       this.scroll.go();
  }


  BackTop.prototype._checkPosition=function(){
       var $el=this.$el;
       if($(window).scrollTop()>this.opts.pos){
           $el.fadeIn();
       }else{
           $el.fadeOut();
       }
  }

  $.fn.extend({
      backtop:function(opts){
          return this.each(function(){
              new BackTop(this,opts);
          })
      }
   })

})

  

define(['jquery'],function($){
      function ScrollTo(opts){
             this.opts=$.extend({},ScrollTo.DEFAULTS,opts);
             this.$el=$('html,body');
  
       }
       ScrollTo.DEFAULTS={
             dest:0,
             speed:800
       }

      ScrollTo.prototype.move=function(){
              var opts=this.opts;
              if($(window).scrollTop()!=opts.dest){
                  if(!this.$el.is(':animated')){
                        this.$el.animate({
                              scrollTop:opts.dest
                        },opts.speed);
                   }
              }
      }
       ScrollTo.prototype.go=function(){
                 var dest=this.opts.dest;
                 if($(window).scrollTop()!=dest){
                      this.$el.scrollTop(dest);
                 }
      }


       return{
                ScrollTo:ScrollTo
        }

})

  

posted @ 2015-07-06 15:24  bjsunhe  阅读(486)  评论(0编辑  收藏  举报