**
* 获取鼠标在页面上的位置
* @param ev 触发的事件
* @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getmousepoint(ev) {
// 定义鼠标在视窗中的位置
var point = {
x:0,
y:0
};
// 如果浏览器支持 pageyoffset, 通过 pagexoffset 和 pageyoffset 获取页面和视窗之间的距离
if(typeof window.pageyoffset != 'undefined') {
point.x = window.pagexoffset;
point.y = window.pageyoffset;
}
// 如果浏览器支持 compatmode, 并且指定了 doctype, 通过 documentelement 获取滚动距离作为页面和视窗间的距离
// ie 中, 当页面指定 doctype, compatmode 的值是 css教程1compat, 否则 compatmode 的值是 backcompat
else if(typeof document.compatmode != 'undefined' && document.compatmode != 'backcompat') {
point.x = document.documentelement.scrollleft;
point.y = document.documentelement.scrolltop;
}
// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
else if(typeof document.body != 'undefined') {
point.x = document.body.scrollleft;
point.y = document.body.scrolltop;
}
// 加上鼠标在视窗中的位置
point.x += ev.clientx;
point.y += ev.clienty;
// 返回鼠标在视窗中的位置
return point;
}
视窗 (浏览器可视窗口) 就像是页面上的掩板开了一个洞. 滚动条可以改变页面和视窗之间的偏移量, 从而可以通过视窗看到页面的各个位置.
鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置
右图中的 cursorx 和 cursory 分别是鼠标在视窗中的横向和纵向位置, scrolly 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollx. 那么鼠标在页面上的位置就是: (scrollx+cursorx, scrolly+cursory)
ie 以外的浏览器 (本人测试过 firefox 3.6, opera 10.10, chrome 4.1 和 safari 4.0.4) 均可以通过 pagexoffset 和 pageyoffset 来获取页面和视窗间的横纵距离. 但 ie (本人测试过 ie6, ie7, ie8) 只能通过滚动位移来获取页面和视窗间的距离, 并存在一到两个像素的偏离.
网页特效 实现变速回到顶部
我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...
function gotop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentelement) {
x1 = document.documentelement.scrollleft || 0;
y1 = document.documentelement.scrolltop || 0;
}
if (document.body) {
x2 = document.body.scrollleft || 0;
y2 = document.body.scrolltop || 0;
}
var x3 = window.scrollx || 0;
var y3 = window.scrolly || 0;
// 滚动条到页面顶部的水平距离
var x = math.max(x1, math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = math.max(y1, math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speed = 1 + acceleration;
window.scrollto(math.floor(x / speed), math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokefunction = "gotop(" + acceleration + ", " + time + ")";
window.settimeout(invokefunction, time);
}
}
document.documentelement.scrolltop, document.body.scrolltop, window.scrolly 其实都是一样的, 但它们只在某些浏览器中起作用. 至于那哪个在哪些浏览器起作用可以自己调试一下.
html 代码:
1
<a href="#" onclick="gotop();return false;">top</a>