基于mootools插件实现遮罩层新手引导

插件代码
复制代码代码如下:
/*
---
name: UserGuider
authors:
- Garland Yang
requires: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions]
version:
- 1.0
...
*/
var UserGuider = new Class（{
Implements: [Options, Events],
options: {
UserGuideList: new Array（）,
step: 0
},
initialize: function （options） {
this.setOptions（options）;
this.step = this.options.step;
},
createGuide: function （） {
var self = this;
$$（".userGuide"）.dispose（）;
var UserGuideList = this.options.UserGuideList;
var config = UserGuideList[this.step];
if （config == null） {
return;
}
var ele = $$（"." + config.className）[0];
if （ele == null） {
return;
}
$$（"." + config.className + " a"）.set（"target", "_blank"）;
var top = ele.getCoordinates（）.top;
var right = ele.getCoordinates（）.right;
var bottom = ele.getCoordinates（）.bottom;
var left = ele.getCoordinates（）.left;
var width = ele.getCoordinates（）.width;
var height = ele.getCoordinates（）.height;
var x = window.getScrollSize（）.x;
var y = window.getScrollSize（）.y;
this.createShadowDiv（"shadowTop", left, 0, width, top）;
this.createShadowDiv（"shadowRight", right, 0, x - right, y）;
this.createShadowDiv（"shadowButtom", left, bottom, width, y - bottom）;
this.createShadowDiv（"shadowLeft", 0, 0, left, y）;
if （config.src ！= null） {
this.createUserGuideImg（left + config.imgLeft, top + config.imgTop, config.src）;
}
if （config.navUrl ！= null） {
this.createUserGuideNavImg（right - 50, bottom, config.navUrl）;
}
if （this.step > 0） {
this.createUserButton（"userguide_undo", "UserGuide/undo.png", this.step - 1）;
}
if （this.step < UserGuideList.length - 1） {
this.createUserButton（"userguide_next", "UserGuide/next.png", this.step + 1）;
}
this.createUserButton（"userguide_finish", "UserGuide/finish.png", 10000）;
this.changeUserGuideButton（）;
if （config.src2 ！= null） {
this.createUserGuideImg（left + config.imgLeft2, top + config.imgTop2, config.src2）;
}
return this;
},
createShadowDiv: function （id, left, top, width, height） {
var self = this;
var div = new Element（"div"）;
div.set（"id", id）;
div.addClass（"userGuide"）;
div.setStyles（{
left: left + "px",
top: top + "px",
width: width + "px",
height: height + "px",
position: "absolute",
"background-color": "#000",
"z-index": 100,
opacity: 0.5,
filter: "alpha（opacity=50）"
}）;
$$（"body"）.adopt（div）;
return this;
},
createUserGuideNavImg: function （left, top, nav） {
var self = this;
var img = new Element（"img"）;
img.addClass（"userGuideNav"）;
img.addClass（"userGuide"）;
img.setStyles（{
cursor: "pointer",
"z-index": 10000,
left: left + "px",
top: top + "px",
position: "absolute"
}）;
img.set（"src", "userguide/nav.png"）;
img.addEvent（"click", function （） {
window.open（nav）;
}）;
$$（"body"）.adopt（img）;
return this;
},
createUserGuideImg: function （left, top, src） {
var self = this;
var img = new Element（"img"）;
img.addClass（"userGuideImg"）;
img.addClass（"userGuide"）;
img.setStyles（{
"z-index": 1000,
left: left + "px",
top: top + "px",
position: "absolute"
}）;
img.set（"src", src）;
$$（"body"）.adopt（img）;
return this;
},
createUserButton: function （className, src, thisStep） {
var self = this;
var img = new Element（"img"）;
img.addClass（className）;
img.addClass（"userGuide"）;
img.setStyles（{
cursor: "pointer",
"z-index": 1000000,
position: "absolute"
}）;
img.set（"src", src）;
img.addEvent（"click", function （） {
self.step = thisStep;
self.createGuide（）;
}）;
$$（"body"）.adopt（img）;
return this;
},
changeUserGuideButton: function （） {
var self = this;
var size = window.getSize（）;
var scroll = window.getScroll（）;
var scrollSize = window.getScrollSize（）;
$$（".userguide_finish"）.setStyles（{
left: （size.x - 220） + "px",
top: （size.y + scroll.y - 80） + "px"
}）;
$$（".userguide_next"）.setStyles（{
left: （size.x - 420） + "px",
top: （size.y + scroll.y - 80） + "px"
}）;
$$（".userguide_undo"）.setStyles（{
left: （size.x - 620） + "px",
top: （size.y + scroll.y - 80） + "px"
}）;
return this;
}
}）;

调用方式
复制代码代码如下:
var UserGuider;
var UserGuideList = new Array（{
className: "step0",
src: "UserGuide/step0.png",
imgTop: 50,
imgLeft: 50
}, {
className: "step1",
src: "UserGuide/step1.png",
imgTop: -150,
imgLeft: 0,
src2: "UserGuide/pic/1.gif",
imgTop2: 210,
imgLeft2: 450
}, {
className: "step2",
src: "UserGuide/step2.png",
imgTop: 0,
imgLeft: -600,
navUrl: "/MyMessageCenter.aspx",
src2: "UserGuide/pic/2.gif",
imgTop2: 110,
imgLeft2: 80
}, {
className: "step3",
src: "UserGuide/step3.png",
imgTop: -150,
imgLeft: 130,
navUrl: "/MyTaskSearch.aspx",
src2: "UserGuide/pic/3.png",
imgTop2: -120,
imgLeft2: 250
}）;
window.addEvent（"domready",function（）{
UserGuider = new UserGuider（{
UserGuideList: UserGuideList
}）
UserGuider.createGuide（）;
}）;