用mootools插件类方式实现遮罩层新手引导

公司项目有这个需求，刚好这段时间在学习了mootools，于是把功能写成了mootools插件，个人感觉mootools在这方面比jquery强多了。

插件代码

  1 /*
  2 ---
  3 
  4 name: UserGuider
  5 
  6 authors:
  7   - Garland Yang 
  8 
  9 requires: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions]
 10 
 11 version:
 12   - 1.0
 13 ...
 14 */
 15 
 16 var UserGuider = new Class({
 17 
 18     Implements: [Options, Events],
 19 
 20     options: {
 21         UserGuideList: new Array(),
 22         step: 0
 23     },
 24 
 25     initialize: function (options) {
 26         this.setOptions(options);
 27         this.step = this.options.step;
 28     },
 29     createGuide: function () {
 30         var self = this;
 31         $$('.userGuide').dispose();
 32         var UserGuideList = this.options.UserGuideList;
 33         var config = UserGuideList[this.step];
 34         if (config == null) {
 35             return;
 36         }
 37         var ele = $$('.' + config.className)[0];
 38         if (ele == null) {
 39             return;
 40         }
 41         $$('.' + config.className + ' a').set('target', '_blank');
 42         var top = ele.getCoordinates().top;
 43         var right = ele.getCoordinates().right;
 44         var bottom = ele.getCoordinates().bottom;
 45         var left = ele.getCoordinates().left;
 46         var width = ele.getCoordinates().width;
 47         var height = ele.getCoordinates().height;
 48         var x = window.getScrollSize().x;
 49         var y = window.getScrollSize().y;
 50         this.createShadowDiv('shadowTop', left, 0, width, top);
 51         this.createShadowDiv('shadowRight', right, 0, x - right, y);
 52         this.createShadowDiv('shadowButtom', left, bottom, width, y - bottom);
 53         this.createShadowDiv('shadowLeft', 0, 0, left, y);
 54         if (config.src != null) {
 55             this.createUserGuideImg(left + config.imgLeft, top + config.imgTop, config.src);
 56         }
 57         if (config.navUrl != null) {
 58             this.createUserGuideNavImg(right - 50, bottom, config.navUrl);
 59         }
 60         if (this.step > 0) {
 61             this.createUserButton('userguide_undo', 'UserGuide/undo.png', this.step - 1);
 62         }
 63         if (this.step < UserGuideList.length - 1) {
 64             this.createUserButton('userguide_next', 'UserGuide/next.png', this.step + 1);
 65         }
 66         this.createUserButton('userguide_finish', 'UserGuide/finish.png', 10000);
 67         this.changeUserGuideButton();
 68         if (config.src2 != null) {
 69             this.createUserGuideImg(left + config.imgLeft2, top + config.imgTop2, config.src2);
 70         }
 71         return this;
 72     },
 73     createShadowDiv: function (id, left, top, width, height) {
 74         var self = this;
 75         var div = new Element('div');
 76         div.set('id', id);
 77         div.addClass('userGuide');
 78         div.setStyles({
 79             left: left + 'px',
 80             top: top + 'px',
 81             width: width + 'px',
 82             height: height + 'px',
 83             position: 'absolute',
 84             'background-color': '#000',
 85             'z-index': 100,
 86             opacity: 0.5,
 87             filter: 'alpha(opacity=50)'
 88         });
 89         $$('body').adopt(div);
 90         return this;
 91     },
 92     createUserGuideNavImg: function (left, top, nav) {
 93         var self = this;
 94         var img = new Element('img');
 95         img.addClass('userGuideNav');
 96         img.addClass('userGuide');
 97         img.setStyles({
 98             cursor: 'pointer',
 99             'z-index': 10000,
100             left: left + 'px',
101             top: top + 'px',
102             position: 'absolute'
103         });
104 
105         img.set('src', 'userguide/nav.png');
106         img.addEvent('click', function () {
107             window.open(nav);
108         });
109 
110         $$('body').adopt(img);
111         return this;
112     },
113     createUserGuideImg: function (left, top, src) {
114         var self = this;
115         var img = new Element('img');
116         img.addClass('userGuideImg');
117         img.addClass('userGuide');
118         img.setStyles({
119             'z-index': 1000,
120             left: left + 'px',
121             top: top + 'px',
122             position: 'absolute'
123         });
124         img.set('src', src);
125         $$('body').adopt(img);
126         return this;
127     },
128     createUserButton: function (className, src, thisStep) {
129         var self = this;
130         var img = new Element('img');
131         img.addClass(className);
132         img.addClass('userGuide');
133         img.setStyles({
134             cursor: 'pointer',
135             'z-index': 1000000,
136             position: 'absolute'
137         });
138         img.set('src', src);
139         img.addEvent('click', function () {
140             self.step = thisStep;
141             self.createGuide();
142         });
143         $$('body').adopt(img);
144         return this;
145     },
146     changeUserGuideButton: function () {
147         var self = this;
148         var size = window.getSize();
149         var scroll = window.getScroll();
150         var scrollSize = window.getScrollSize();
151         $$('.userguide_finish').setStyles({
152             left: (size.x - 220) + 'px',
153             top: (size.y + scroll.y - 80) + 'px'
154         });
155         $$('.userguide_next').setStyles({
156             left: (size.x - 420) + 'px',
157             top: (size.y + scroll.y - 80) + 'px'
158         });
159         $$('.userguide_undo').setStyles({
160             left: (size.x - 620) + 'px',
161             top: (size.y + scroll.y - 80) + 'px'
162         });
163         return this;
164     }
165 
166 
167 });

调用方式

 1 var UserGuider;
 2 var UserGuideList = new Array({
 3     className: 'step0',
 4     src: 'UserGuide/step0.png',
 5     imgTop: 50,
 6     imgLeft: 50
 7 }, {
 8     className: 'step1',
 9     src: 'UserGuide/step1.png',
10     imgTop: -150,
11     imgLeft: 0,
12     src2: 'UserGuide/pic/1.gif',
13     imgTop2: 210,
14     imgLeft2: 450
15 }, {
16     className: 'step2',
17     src: 'UserGuide/step2.png',
18     imgTop: 0,
19     imgLeft: -600,
20     navUrl: '/MyMessageCenter.aspx',
21     src2: 'UserGuide/pic/2.gif',
22     imgTop2: 110,
23     imgLeft2: 80
24 }, { 
25     className: 'step3',
26     src: 'UserGuide/step3.png',
27     imgTop: -150,
28     imgLeft: 130,
29     navUrl: '/MyTaskSearch.aspx',
30     src2: 'UserGuide/pic/3.png',
31     imgTop2: -120,
32     imgLeft2: 250
33 });
34 window.addEvent('domready',function(){
35     UserGuider = new UserGuider({
36       UserGuideList: UserGuideList
37     })
38     UserGuider.createGuide();
39 });

转载于:https://www.cnblogs.com/RicardY/archive/2012/05/24/2516646.html