jquery.guide.js 新手指引

/*!
* by xyb
* 新版上線時候的黑色半透明鏤空遮罩指引效果實現jQuery小插件
* 兼容到IE8+
* MIT使用協議，使用時候保留版權
* 
*/

$.guide = function (options) {
	var defaults = {
		selector: '',  // 頁面提示元素選擇器物，會使用匹配的第一個元素
		content: '',  // 提示內容可是是字符串，也可以是jQuery包裝器對象
		align: 'center', // center, right,
		offset: {
			x: 0,
			y: 0
		}
	};
	// options格式
	/* [{
		selector: '',  
		content: '',
		align: 'left',
		offset: {
			x: 0,
			y: 0
		}
	}]

	*/

	var urlRoot = location.href.split('#')[0].replace(/\W/g, '') + 'Guide';

	// 如果要調試，最后的== '1'改成'2'就好了
	if (!window.localStorage || !options || !$.isArray(options) || localStorage[urlRoot] == '1') {
		return;
	}

	// 創建層
	var elGuideOverlay = $('#guideOverlay');
	var elGuideShut = $('#guideShut');
	var elGuide = $('#guideOverlap');

	var start = 0;

	var remove = function () {
		elGuideOverlay.remove();
		elGuideShut.remove();
		elGuide.remove();
		// 鍵盤事件移除
		$(document).off('keydown.guide');
		$(window).off('resize.guide');
	};
	var goto = function (change) {
		start = start + change;
		if (start < 0) {
			start = 0;
		}
		if (!options[start]) {
			remove();
			return;
		}

		var data = $.extend({}, defaults, options[start]);

		// 獲取元素
		var elTrigger = $(data.selector).eq(0);
		if (elTrigger.length == 0 && change) {
			goto(change);
			return;
		}

		// 裝載對應提示內容
		elGuide.empty();

		var elGuideContent = $('<div></div>').css({
			display: 'none',
			position: 'absolute'
		}).append(data.content);

		elGuide.append(elGuideContent);

		// 定位
		elGuide.css({
			width: elTrigger.outerWidth(),
			height: elTrigger.outerHeight(),
			left: elTrigger.offset().left,
			top: elTrigger.offset().top
		});

		// 提示內容定位
		elGuideContent.css({
			top: elTrigger.outerHeight() - 5 + data.offset.y
		});

		if (data.align == 'left') {
			elGuideContent.css({
				left: data.offset.x
			});
		} else if (data.align == 'right') {
			elGuideContent.css({
				right: data.offset.x
			});
		} else {
			elGuideContent.css({
				left: (elTrigger.outerWidth() - elGuideContent.width()) / 2 + data.offset.x
			});
		}
		
		setTimeout(function () {
			elGuideContent.show();
		}, history.pushState? 100: 0);
	};

	if (!elGuideOverlay.length) {
		elGuideOverlay = $('<a id="guideOverlay" href="javascript:" role="button"></a>').css({
			position: 'fixed',
			left: 0,
			top: 0,
			right: 0,
			bottom: 0,
			background: 'url(about:blank)',
			zIndex: 99,
			outline: 'none'
		});
		
		if (history.pushState) {
			elGuideOverlay.css('background', 'linear-gradient(to top, transparent, transparent)');	
		}

		elGuideShut = $('<a href="javascript:" id="guideShut" role="button">關閉</a>').css({
			position: 'fixed',
			top: 10,
			right: 10,
			color: '#fff',
			zIndex: 100
		});;

		elGuide = $('<div id="guideOverlap"></div>').css({
			position: 'absolute',
			transition: 'all .3s',
			boxShadow: '0 0 0 9999px rgba(0,0,0,.75)',
			// 如果想支持圓角，下面的注釋
			// borderRadius: '50%',
			zIndex: 100
		});
		
		if (![].map) {
			// IE8瀏覽器
			elGuide.css('outline', '9999px solid #000').css('filter', 'alpha(opacity=75)');
		}

		$(document.body).append(elGuideOverlay).append(elGuide).append(elGuideShut);

		// 事件
		elGuideShut.on('click', function () {
			remove();
		});

		// 翻頁
		elGuideOverlay.on({
			click: function () {
				goto(1);
			}
		});

		$(document).on('keydown.guide', function (event) {
			var keycode = {
				37: 'left',
				38: 'up',
				39: 'right',
				40: 'down',
				27: 'esc'
			};

			switch (keycode[event.keyCode]) {
				case 'esc': {
					remove();
					break;
				}
				case 'up': case 'left': {
					goto(-1);
					event.preventDefault();
					break;
				}
				case 'right': case 'down': {
					goto(1);
					event.preventDefault();
					break;
				}
			}
		});
		
		$(window).on('resize.guide', function () {
			goto(0);
		});
	}

	goto(0);
	
	elGuideOverlay[0].focus();

	localStorage[urlRoot] = '1';
};


//實例應用

<script>
// 測試用，為了每次刷新都有效果，實際開發不需要
var urlRoot = location.href.split('#')[0].replace(/\W/g, '') + 'Guide';
localStorage[urlRoot] = '2';

$.guide([{
selector: '.logo',
content: '<img src="guide-1.png" width="102" height="47">',
align: 'left'
}, {
selector: '.ad img',
content: '<img src="guide-2.png" width="104" height="47">'
}, {
selector: '#back',
content: '<img src="guide-3.png" width="72" height="47">',
align: 'left'
}, {
selector: '.demo img',
content: '<img src="guide-4.png" width="86" height="47">'
}]);
</script>