|
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
object.scrollIntoView( [bAlignToTop])
Parameters
| bAlignToTop |
Optional. Boolean that specifies one of the following values:
| true |
Default. Scrolls the object so that top of the object is visible at the top of the window. |
| false |
Scrolls the object so that the bottom of the object is visible at the bottom of the window. | |
Return Value
No return value.
Remarks
The scrollIntoView method is useful for immediately showing the user the result of some action without requiring the user to manually scroll through the document to find the result.
Depending on the size of the given object and the current window, this method might not be able to put the item at the very top or very bottom, but will position the object as close to the requested position as possible.
Example
This example uses the scrollIntoView method to underline the content of the document's fifth paragraph and scroll it into view at the top of the window.
HideExample var coll = document.all.tags("P");
if (coll.length >= 5)
{
coll(4).style.textDecoration = "underline";
coll(4).scrollIntoView(true);
}
Standards Information
There is no public standard that applies to this method.
Applies To
| INPUT type=ra... |
| Platform |
Version |
| Win16: |
4.0 |
| Win32: |
4.0 |
| Windows CE: |
4.0 |
| Unix: |
4.0 |
| Mac: |
4.0 |
| Version data is listed when the mouse hovers over a link, or the link has focus. | |
A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, controlRange, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TextRange, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, WBR, XMP |
| Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms. |
不经意的时候看到QQ邮箱收到附件的时候，有一个效果，如下图所示：
比较好奇的就抓了一下节点，然后看了一下源代码，主要使用了这样一个函数：scrollIntoView
scrollIntoView 看到这个函数名的时候，其实也能联想到它的作用(功能)，将一个对象显示在当前window窗口的可视范围之内。
这个是W3C定义的DOM方法，各浏览器均支持，包括：IE5.5+、FF2.0+....
可以到PPK的博客中查看更详细的介绍：http://www./dom/w3c_cssom.html
可以点击链接查看Demo:http://www./dom/tests/scrollintoview.html
不过上面并未介绍它的参数，具体参数说明可以看这里：
http://msdn.microsoft.com/en-us/library/ms536730(VS.85).aspx
语法： object.scrollIntoView( [bAlignToTop])
参数：
bAlignToTop 布尔型：true/false，默认参数不传则为true
它们分别代表不同的含义。
true:如果滚动条足够长，则将对象的顶端与当前窗口的顶部对齐，如下图：
false:对象的底端与当前窗口的顶端对齐，如下图：
而要实现闪烁的效果则是使用装饰的特性：延时执行函数，切换对象的样式 70毫秒切换一次，上面的效果总花切换了4次（调用了4次函数）。
Demo的源码（拷贝时请注意编码，我使用的是utf-8）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0;}
body {background-color:#FFFFFF;}
td,input,button,select,body {font-family:"lucida Grande",Verdana;font-size:12px;}
.ico_big{float:left;margin:2px 8px 0 0;}
img{border:none;}
.toolbg a, .attbg a {color:#244281;}
.txt_left{text-align:left;}
.attbg {background-color:#e8edf4;}
.toolbg {background-color:#D2DBEA;}
</style>
</head>
<body>
<div style="margin:10px auto; width:500px;padding:50px; border:1px solid #ccc;">
<span onClick="ScrollToAttach();" style="cursor:pointer">
<a id="linkAttachment"><img src="http://m369.mail.qq.com/zh_CN/htmledition/images/newicon/fj_min/fu_rar.gif" align="absmiddle" />可以点击我试试!</a>
</span>
<div style="margin:500px;"></div>
<div id="attachment" style="padding:2px;margin-bottom:15px;*margin-bottom:5px;display: color:#666;" class="attbg">
<div style="padding:6px 0 10px 6px;" class="txt_left">
<b style="font-size:14px;">
<img src="http://res./zh_CN/htmledition/images/icon_att3476l.gif" align="absmiddle" class="showattch" border="0"/> 附件
</b>(<span id="attachmentCount">1</span> 个)
</div>
<div style="padding:0 8px 6px 12px;background:#fff;line-height:140%;">
<div class="graytext clr" style="padding-top:12px;">
<b style="color:#000;font-weight:bold;font-size:12px;" >普通附件</b>
<div style="padding:1px 0 0 0; color:#666;">(已通过卡巴斯基杀毒引擎扫描)</div>
</div>
<div style="margin-top:10px;">
<div class="ico_big">
<a href="javascript:;">
<img style="width:auto;" src="http://m369.mail.qq.com/zh_CN/htmledition/images/newicon/fj_max/fu_rar.gif"/>
</a>
</div>
<div class="name_big">
<span>ecomstore.tar</span><span class="graytext"> (1.46M)</span>
<div class="down_big" >
<a title="请直接点击或鼠标右键转下载工具打开，请不要拖拽到下载工具悬浮框中" href="javascript:;" >下载</a>
<a href="javascript:;">打开</a>
<a href="javascript:;">在线预览</a>
<a href="javascript:;">保存到我的随身盘</a>
</div>
</div>
</div>
<div class="clr" style="height:8px;overflow:hidden"></div>
</div>
</div>
<div style="margin:900px;"></div>
</div>
<button style="position:absolute; top:600px; left:100px; width:200px;" onclick="scrollIntoViewHandler(this)">使用scrollIntoView:true</button>
<script type="text/javascript">
function scrollIntoViewHandler(_this) {
if(_this.flag) {
_this.innerHTML = _this.innerHTML.replace(/false/, 'true');
_this.flag = false;
} else {
_this.innerHTML = _this.innerHTML.replace(/true/, 'false');
_this.flag = true;
}
document.getElementById("attachment").scrollIntoView(_this.flag);
}
function ScrollToAttach(vq) {
vq = vq || "attachment";
var bw = document.getElementById(vq);
if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
//bw.scrollIntoView(document.documentElement.clientHeight < bw.offsetHeight);
bw.scrollIntoView(false);
}
Splash(vq, 4);
}
/**
* 滚动至...
* @param {Object} vq
* @param {Object} times
* @param {Object} isNotInit
*/
function Splash(vq, times, isNotInit) {
var ah = arguments.callee,
afx = document.getElementById(vq);
if (!isNotInit || !ah.time) {
ah.orgclass = afx.className;
ah.time = 0;
}
afx.className = (ah.time % 2 == 0) ? "toolbg": ah.orgclass;
if (++ah.time < times) {
setTimeout(function() {
Splash(vq, times, true);
}, 70);
}
}
</script>
</body>
</html>
|
