天天看點

RequireJS子產品化開發案例,實作Scroll動畫

//入口main-data檔案代碼,在頁面中直接引入入口檔案即可

requirejs.config({
	paths:{
		jquery:"jquery-1.12.4"
	}
});<span style="font-family: Arial, Helvetica, sans-serif;">//path定義我們的路徑</span>
           
requirejs(["jquery","BackTop","scrollTo"],function($,BackTop,scrollTo){  //引入我們要依賴的子產品檔案
	
	new BackTop.BackTop($(".sidebar_up"),{
		 mode:"move",
		 pos:$(window).height(),
		 speed:2000
	});

	var scroll_0 = new scrollTo.ScrollTo({dest:550,speed:1000});
	$("#floor_0").on("click",$.proxy(scroll_0.move,scroll_0));
	
	
	var scroll_1 = new scrollTo.ScrollTo({dest:1150,speed:1000});
	$("#floor_1").on("click",$.proxy(scroll_1.move,scroll_1));
	
	
	var scroll_2 = new scrollTo.ScrollTo({dest:550,speed:1000});
	$("#floor_2").on("click",$.proxy(scroll_2.move,scroll_2));
	
	
	var scroll_3 = new scrollTo.ScrollTo({dest:2500,speed:1000});
	$("#floor_3").on("click",$.proxy(scroll_3.move,scroll_3));

});
           
//定義編寫子產品檔案ScrollTo.js
           
<pre name="code" class="javascript">define(["jquery"], function($) {
	function ScrollTo(opts) {
		this.opts = $.extend({}, scrollTo.DEFAULTS, opts);
		this.$el = $("html,body");
	}
	ScrollTo.prototype.move = function() {
		var opts = this.opts;
		var dest = opts.dest;
		if($(window).scrollTop() != dest) {
			if(!this.$el.is(":animated")) {
				this.$el.animate({
					scrollTop: dest
				}, opts.speed);
			}
		}

	};
	ScrollTo.prototype.go = function() {
		var dest = this.opts.dest;
		if($(window).scrollTop() != dest) {
			this.$el.scrollTop(dest);
		}
	};
	ScrollTo.DEFAULTS = {
		dest: 0,
		speed: 800
	};

	return {
		ScrollTo: ScrollTo
	};
});
           
//定義編寫子產品檔案BackTo.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();
		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));
	}
	BackTop.DEFAULTS = {
		mode: "move",
		pos: $(window).height(),
		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);
			});
		}
	});

	return {
		BackTop: BackTop
	};

});