/* * * 扩展jq原型: 懒、懒加载、懒动画 * --- 基于window滚动事件来实时更新DOM的视图状态，以表明是否在规定的可视区，并作有change回调 * * $jq.viewChange( {top:100,bottom:100,change:function(status){}} ) --- status: ‘in‘/‘out‘ * $jq.viewChange(‘off‘) * * $jq[n].viewChange.status = ‘in‘/‘out‘ ----- 状态为‘in‘表示该DOM在规定的可视区 * */(function() {	var $win = $(window);	var winH = $win.height();	var _isRun = true;	$win.resize(function() {		winH = $win.height();		if (_isRun) {			_isRun = false;			setTimeout(function() {				$win.trigger(‘scroll.viewChange‘);				_isRun = true;			}, 100);		}	});	var setStatus = function(params) {		if (this.parentElement) { //判断DOM是否还在页面中			var $self = $(this);			var offsetTop = $self.offset().top,				selfH = $self.height(),				scrollTop = $win.scrollTop();			if (scrollTop + winH + params.bottom > offsetTop && scrollTop - params.top < offsetTop + selfH) {				if (this.viewChange.status !== ‘in‘) {					this.viewChange.status = ‘in‘;					params.change.call(this, this.viewChange.status);				}			} else {				if (this.viewChange.status !== ‘out‘) {					this.viewChange.status = ‘out‘;					params.change.call(this, this.viewChange.status);				}			}		} else {			$win.off(‘scroll.‘ + this.viewChange.eventNamespace);		}	};	$.fn.viewChange = function(options) {		if (options === ‘off‘) {			this.each(function() {				if (this.viewChange) {					$win.off(‘scroll.‘ + this.viewChange.eventNamespace);					delete this.viewChange;				}			});		} else {			var params = {				top: 0, //增加或缩小顶部范围				bottom: 0, //增加或缩小底部范围				change: $.noop //视图状态发生改变时的回调：function(status){}			};			params = $.extend(params, options);			params.top = parseInt(params.top);			params.bottom = parseInt(params.bottom);			this.each(function() {				if (this.viewChange) {					$win.off(‘scroll.‘ + this.viewChange.eventNamespace);				}				this.viewChange = {					eventNamespace: ‘viewChange.‘ + Math.random().toString().replace(‘0.‘, ‘‘),				};				$win.on(‘scroll.‘ + this.viewChange.eventNamespace, function() {					setStatus.call(this, params);				}.bind(this));				setStatus.call(this, params);			});		}		return this;	};})();//使用情况$jq.viewChange({	top: -100, //缩小顶部范围	bottom: 100, //增加底部范围	change: function(status) {		if (status === ‘in‘) {			//当滚动到规定的可视区时		} else if (status === ‘out‘) {			//当滚动出规定的可视区时		}	}});