課程
/前端開發(fā)
/JavaScript
/側(cè)欄工具條開發(fā)
老師在不在?有沒有代碼?把代碼放上來唄^^
2016-08-23
源自:側(cè)欄工具條開發(fā) 4-2
正在回答
define(['jquery'],function($){ ????????function?ScrollTo(opst){ ????????????this.opst?=$.extend({},ScrollTo.DEFAULTS,opst); ????????????//exend表示的是繼承,'opst'表示傳替參數(shù)給默認(rèn)函數(shù)’scrollTo.DEFAULTS‘,覆蓋成新函數(shù)傳給"{}" ????????????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); ????????} ????????} ????????//當(dāng)沒有值的時候,默認(rèn)值 ??????????ScrollTo.DEFAULTS?={ ??????????????des:0, ??????????????speed:800 ??????????}; ??????return?{ ??????????ScrollTo:ScrollTo ??????} })
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就可以刪除?? ? ?? ??? ??? ?//遍歷屬性是否有多個,有多少個就執(zhí)行多少個,用到“each”?? ? ?? ??? ??? ?new BackTop(this,opts)?? ? ?? ??? ?})?? ? ?? ??? ?return this;//返回函數(shù)?? ? ?? ?}?? ? })?? ? return{?? ? ?? ??? ? ?? ?BackTop:BackTop?? ? } });
陳小窩
舉報
帶動畫效果的工具條,掌握如何用CSS3完成簡單的動畫效果
1 回答老師求代碼
1 回答求源代碼老師
2 回答有誰可以把他代碼借我看看嗎 就這樣的代碼 我的一直報錯scrollto undefiined
1 回答有這節(jié)課的html代碼嗎?
2 回答有沒有源碼
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-08-24
2016-08-24
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就可以刪除
?? ? ?? ??? ??? ?//遍歷屬性是否有多個,有多少個就執(zhí)行多少個,用到“each”
?? ? ?? ??? ??? ?new BackTop(this,opts)
?? ? ?? ??? ?})
?? ? ?? ??? ?return this;//返回函數(shù)
?? ? ?? ?}
?? ? })
?? ? return{?? ? ?? ?
?? ? ?? ?BackTop:BackTop
?? ? }
});