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


Posted in Javascript onMay 24, 2012

插件代码

/* 
--- 
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(); 
});
Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 #Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 #Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 #Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 #Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 #Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 #Javascript
JavaScript之编码规范 推荐
May 23 #Javascript
You might like
php 空格,换行,跳格使用说明
2009/12/18 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
Js组件的一些写法
2010/09/10 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python之pymysql的使用小结
2019/07/01 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python生成器常见问题及解决方案
2020/03/21 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
商务邀请函范文
2014/01/14 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
单位承诺书格式
2014/05/21 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
优秀教师单行材料
2014/12/16 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
死者家属慰问信
2015/03/24 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
详解nginx进程锁的实现
2021/06/14 Servers