基于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 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
jQuery实现文档树效果
Feb 20 Javascript
js实现抽奖效果
Mar 27 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
使用vue实现通过变量动态拼接url
Jul 22 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
深入php数据采集的详解
2013/06/02 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
node.js入门教程
2014/06/01 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python的几种开发工具介绍
2007/03/07 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
多版本Python共存的配置方法
2017/05/22 Python
Python WSGI的深入理解
2018/08/01 Python
python 字典的打印实现
2019/09/26 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python3并发写文件与Python对比
2019/11/20 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python 自动识别并连接串口的实现
2021/01/19 Python
Ajax请求总共有多少种Callback
2016/07/17 面试题
交通安全寄语大全
2014/04/08 职场文书
社区禁毒工作方案
2014/06/02 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python