RequireJS模块化开发案例，实现Scroll动画

最新推荐文章于 2021-04-14 17:08:31 发布

dande__lion

最新推荐文章于 2021-04-14 17:08:31 发布

阅读量437

点赞数

分类专栏： Web前端文章标签：前端模块化开发 RequireJS 模块化

本文链接：https://blog.csdn.net/dande__lion/article/details/52832327

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//入口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
	};

});