老师在不在?有没有代码?把代码放上来呗^^

来源:4-2 HTML结构

慕粉3119754

2016-08-23 17:03

老师在不在?有没有代码?把代码放上来呗^^

写回答 关注

2回答

  • ID_9527
    2016-08-24 13:51:29
    define(['jquery'],function($){
    
            function ScrollTo(opst){
                this.opst =$.extend({},ScrollTo.DEFAULTS,opst);
                //exend表示的是继承,'opst'表示传替参数给默认函数’scrollTo.DEFAULTS‘,覆盖成新函数传给"{}"
                this.$el = $('html,body')
            }
    
            ScrollTo.prototype.move = function() {
                var opst = this.opst,
                    des = opst.des
                if($(window).scrollTop() != des){//如果滚动条不在指定的位置
    
                    if (!this.$el.is(':animated')) {
                    //如果页面不在滚动,':animated'注意属性this.$el.is(':animated') *animated
    
                         this.$el.animate({
                            scrollTop:des    
                         },opst.speed);    
                    }
    
                }
    
            };
    
            ScrollTo.prototype.go = function() {
                var des = this.opst.des
                if($(window).scrollTop() != des){
                this.$el .scrollTop(des);
            }
    
            }
            //当没有值的时候,默认值
              ScrollTo.DEFAULTS ={
                  des:0,
                  speed:800
              };
    
          return {
              ScrollTo:ScrollTo
          }
    })
  • ID_9527
    2016-08-24 13:50:52

    define(['jquery','scrollto'],function($,scrollto){
         function BackTop(el,opts){
                 this.opts =$.extend({},BackTop.DEFAULTS,opts);
                 this.$el = $(el);
                 this.scroll = new scrollto.ScrollTo({
                     des:0,
                      speed:this.opts.speed
                     })
                 if(this.opts.mode == 'move'){
                     this.$el.on('click',$.proxy(this._move,this));
                 }else{
                     this.$el.on('click',$.proxy(this._go,this));
                 };
                 $(window).on('scroll',$.proxy(this._checkPosition,this));
                 this._checkPosition(this.opts.pos);
         }

         BackTop.DEFAULTS = {
             mode:'move',
             pos:$(window).height(),
             speed:800
         };
         BackTop.prototype._move =function(){
             this.scroll.move();
         };
         BackTop.prototype._go = function(){
             this.scroll.go();
         };
         //checkPosition($(window).height());
        
         BackTop.prototype._checkPosition = function(){
             
             if ($(window).scrollTop() > this.opts.pos) {
                 this.$el.fadeIn();
             }else{
                 this.$el.fadeOut();
             }
         };    
         // 封装插件
         $.fn.extend({//jQ封装插件的方法
             backtop:function(){//命名插件的名称
                  this.each(function(opts){ //此前面可以用return this,后面的return this就可以删除
                     //遍历属性是否有多个,有多少个就执行多少个,用到“each”
                     new BackTop(this,opts)
                 })
                 return this;//返回函数
             }
         })
         return{         
             BackTop:BackTop
         }
    });

    陈小窝

    go的方法无法执行,为啥呢

    2017-02-23 19:00:38

    共 1 条回复 >

侧栏工具条开发

带动画效果的工具条,掌握如何用CSS3完成简单的动画效果

68226 学习 · 289 问题

查看课程

相似问题