基于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();
});