基于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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
ES6字符串的扩展实例
Dec 21 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分页函数
2006/10/09 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php目录管理函数小结
2008/09/10 PHP
php导入模块文件分享
2015/03/17 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python决策树之C4.5算法详解
2017/12/20 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python基于Selenium的web自动化框架
2019/07/14 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
优秀应届生求职信
2014/06/16 职场文书
师德师风剖析材料
2014/09/30 职场文书
2016年端午节寄语
2015/12/04 职场文书
会计入职心得体会
2016/01/22 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android