Javascript公共脚本库系列 弹出层.docxVIP

 HYPERLINK /zhangziqiu/archive/2009/02/05/JavascriptLibrary-1.html Javascript公共脚本库系列: 弹出层 一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图: 点击图中的航空公司后,会在航空公司下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS框架又有些杀鸡用牛刀.所以在收集整理了一些资料后, 写出了下文中的ScriptHelper类的弹出层方法. 主要特点有: 支持多浏览器 使用面向对象方法封装 使用简单,通用性强. 将计算位置等函数进行提取, 所有的相关函数都可以单独调用, 可根据具体项目继续二次开发. 三.脚本方法 下面我先将脚本方法贡献出来,然后举例如何使用. 最后讲解脚本的原理. /* ==================== ScriptHelper 开始 ==================== */ /* scriptHelper 脚本帮助对象. 创建人: ziqiu.zhang 2008.3.5 添加函数: getScroll():得到鼠标滚过的距离-兼容XHTML getClient():得到浏览器当前显示区域的大小-兼容XHTML showDivCommon():显示图层. 使用举例: div id=testDiv style=display:none; position:absolute; border:1px #000000;我是测试图层我是测试图层/div div style=width:400px; text-align:center;diva href=# onclick=ScriptHelper.showDivCommon(this,testDiv, 20, 70)事件源/a/div/div */ function scriptHelper() { } // 得到鼠标滚过的距离 scrollTop 与 scrollLeft /* 用法与测试: var myScroll = getScroll(); alert(myScroll.scrollTop: + myScroll.scrollTop); alert(myScroll.scrollLeft: + myScroll.scrollLeft); */ scriptHtotype.getScroll = function () { var scrollTop = 0, scrollLeft = 0; scrollTop = (document.body.scrollTop document.documentElement.scrollTop)? document.body.scrollTop:document.documentElement.scrollTop; if( isNaN(scrollTop) || scrollTop 0 ){ scrollTop = 0 ;} scrollLeft = (document.body.scrollLeft document.documentElement.scrollLeft )? document.body.scrollLeft:document.documentElement.scrollLeft; if( isNaN(scrollLeft) || scrollLeft 0 ){ scrollLeft = 0 ;} return { scrollTop:scrollTop, scrollLeft: scrollLeft}; } // 得到浏览器当前显示区域的大小 clientHeight 与 clientWidth /* 用法与测试: var myScroll = getScroll(); alert(myScroll.sTop: + myScroll.sTop); alert(myScroll.sLeft: + myScroll.sLeft); */ scriptHtotype.getClient = function