html新手引导遮罩,基于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();

});