基于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 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
关于使用js算总价的问题
Jun 23 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
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 数组实例说明
2008/08/18 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python获取从命令行输入数字的方法
2015/04/29 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
财务会计毕业生自荐信
2013/11/02 职场文书
责任书范本
2014/08/25 职场文书
离婚协议书范文
2015/01/26 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL