有一个文章的帮助很大:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow这个文章介绍取得当前浏览器长宽的办法,还有当前浏览器的scroll偏移的xy值,这样,我们就可以定位一个层在页面中间了
窗口长宽的代码
function getInnerXY() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}
scroller偏移的代码
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
下面是让层居中,注意,ie的行为不一致,导致要单独判断是否加上偏移:
function showDialog (did) {
??? G("blankiframe").style.display = "block";
??? G("bmask").style.display="block";
??? var el = G(did);
??? el.style.display = "block";
??? var innerxy = getInnerXY();
??? // add the offset
??? var offxy = getScrollXY();
??? if (js.util.browser.msie) { // ie
??? ??? el.style.top = ((innerxy[1]-el.clientHeight)/2 + offxy[1])+"px";
??? ??? el.style.left = ((innerxy[0]-el.clientWidth)/2 + offxy[0])+"px";
??? } else {
??? ??? el.style.top = ((innerxy[1]-el.clientHeight)/2)+"px";
??????? el.style.left = ((innerxy[0]-el.clientWidth)/2)+"px";
??? }
???
//??? el.style.marginTop = -(el.clientHeight/2) + "px";
//??? el.style.marginLeft = "-240px";
}
加上一下js.util.browser的代码:
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
js.util.browser = {
??? version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
??? safari: /webkit/.test(userAgent) && !/chrome/.test(userAgent),
??? chrome: /chrome/.test(userAgent),
??? opera: /opera/.test(userAgent),
??? msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
??? mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};
分享到:
相关推荐
3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置...
<script language="javascript" type="text/javascript"> window.onload=function(){showBox();setTimeout("closeBox()",10000)} function showBox(o){ if (o==undefined) o=document.getElementById("rbbox"); ...
6种基于js Scrolling的滚动面板
JavaScript
15.8 Document and Element Geometry and Scrolling 389 15.9 HTML Forms 396 15.10 Other Document Features 405 16. Scripting CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....
问题:在index.html 中,iframe 引入son.html,在son.html 中如何点击某个操作,实现屏蔽整个页面,并弹出要显示的层? 准备: index.html son.html 思路: 一:index.html中iframe引入son.html , 复制代码代码...
Scrolling during drag and drop(4KB)
">弹出</a></p> <p><a href="javascript:baidu.show();">打开百度</a></p> 选择日期 <input type="text" name="textfield" id="textfield" onclick="javascript:ShowCalendar(this)" /> </p>
Smooth是一个基于的小型JavaScript模块,用于在滚动时创建平滑的滚动和视差效果。 它既可以用于伪造的滚动条,也可以用于本机滚动。 用法 npm install smooth-scrolling import Smooth from 'smooth-scrolling' ...
VB平滑文字滚动,上下左右滚动示例VB smooth text scrolling, scroll up and down around the sample
创造firefox的丝滑浏览感受。 平滑滚动,比opera更加流畅。 适用于firefox3.5和3.6
一个基于ASP.Net and C#是实现的Scrolling News 动态新闻消息滚动显示控件代码。
Comment Scrolling.rp
无缝滚动scrolling.rar
A simple, seamless scrolling for Vue.js vue无缝滚动component.zip
By the end of this book you will have created a complete prototype level for a side scrolling action platform game and will be prepared to begin designing additional levels and games of your own. ...
text-and-scrolling-view
you can know how to scrolling text with C#
谷歌插件自动滚动网页,网页到达底部能自动转换到下一标签,只需要切换插件状态即可,操作简单,看小说使用方便,不用一直手动翻
Add advanced features such as realistic physics, particle effects, scrolling, tweaking, sound effects, background music, and more to your games Build exciting cross-platform games and build a memory ...