javascript技能

JavaScript和CSS的复习（3）

更新时间: 2010年6月29日02:03:11转载作者:

嘿，我又做了三部曲. 这是最后一部分，关于鼠标和浏览器本身的一些属性.

首先让我们看一下如何获得相对于整个页面的光标位置，因为光标位置变量x和y通常是通过鼠标事件（例如mousemove或mousedown）获得的. 以下两个常规函数用于获取相对于页面当前整体位置的光标.

复制代码，代码如下:

//获取光标的水平位置

function getX（e）{

//广义事件对象

e = e || window.event;

///首先检查非IE浏览器的位置，检查IE的位置

返回e.pageX || e.clientX + document.body.scrollLeft;

}

//获取光标的垂直位置

函数getY（e）{

//广义事件对象

e = e || window.event;

///首先检查非IE浏览器的位置，检查IE的位置

返回e.pageY || e.clientY + document.body.scrollTop;

}

例如，FF中的e.pageX是整个页面的X坐标（包括滚动条的滚动距离），而在IE中，e.clientX代表当前显示在用户前面的视图中的X坐标，加上document.body.scrollLeft（水平滚动条的距离）是完整的X坐标位置.

以下概念是视口，可以将其视为浏览器滚动条中的所有内容. 视口还包含的某些组件是视口窗口，页面和滚动条.

获取页面大小:

复制代码，代码如下:

//返回页面的高度（添加内容时可能会更改）

function pageHeight（）{

返回document.body.scrollHeight;

}

//返回页面宽度

function pageWidth（）{

返回document.body.scrollWidht;

}

scrollHeight和scrollWidth（单击查看），它们详细描述了元素的潜在宽度和高度，而不仅仅是当前显示的大小.

接下来，我们将获取滚动条的位置，换句话说，就是从页面顶部到视口的距离.

复制代码，代码如下:

//确定浏览器水平滚动位置的功能

function scrollX（）{

//一个快捷方式，在IE6 / 7的严格模式下使用

var de = document.documentElement;

//如果浏览器具有pageXOffset属性，请使用它

返回self.pageXOffset ||

//否则，尝试获取根节点左端的滚动偏移量

（de && de.scrollLeft）||

//最后，尝试获取body元素左端的滚动偏移量

document.body.scrollLeft;

}

//确定浏览器垂直滚动位置的功能

function scrollY（）{

//一个快捷方式，在IE6 / 7的严格模式下使用

var de = document.documentElement;

//如果浏览器具有pageYOffset属性，请使用它

返回self.pageYOffset ||

//否则，尝试获取根节点的顶部滚动偏移量

（de && de.scrollTop）||

//最后，尝试获取body元素的顶部滚动偏移量

document.body.scrollTop;

}

让我们看一下如何移动滚动条. 我们可以使用scrollTo方法. 它作为窗口对象的属性存在. 它有两个参数，x和y偏移量，可以滚动到视口. 位置，两个例子

复制代码，代码如下:

///如果需要滚动到浏览器顶部，可以这样做

window.scrollTo（0,0）

///如果需要滚动到指定的元素，则可以这样做

window.scrollTo（0，pageY（document.getElementById（'content'）））;

如果您不熟悉pageY函数，则可以回过头来学习获取元素在整个文档中的位置，再次给出该元素，然后让自己进行合并

复制代码，代码如下:

//获取元素的Y位置

函数pageY（elem）{

//检查我们是否在根元素上

返回elem.offsetParent吗？

///如果我们可以继续获取上一个元素，请增加当前偏移量并继续递归

elem.offsetTop + pageY（elem.offsetParent）:

//否则，获取当前偏移量

elem.offsetTop;

}

让我们学习如何获取视口的大小. 通过获取视口的大小，我们可以洞悉用户当前可以看到多少内容.

复制代码，代码如下:

//获取视口的高度

function windowHeight（）{

//一个快捷方式，在IE6 / 7的严格模式下使用

var de = document.documentElement;

//如果浏览器具有innerHeight属性，请使用

返回self.innerHeight ||

//否则，尝试获取根节点的高度

（de && de.clientHeight）||

//最后，尝试获取body元素的高度

document.body.clientHeight;

}

//获取视口的宽度

function windowWidth（）{

//一个快捷方式，在IE6 / 7的严格模式下使用

var de = document.documentElement;

//如果浏览器具有innerWidth属性，请使用

返回self.innerWidth ||

//否则，尝试获取根节点的宽度

（de && de.clientWidth）||

//最后，尝试获取body元素的宽度

document.body.clientWidth;

}

也许您可能对innerHeight，clientHeight和其他属性有疑问，只需直接单击即可. 在Mozilla开发人员中心中，解释非常清楚.

最后，让我们谈谈更有趣的效果，该效果在网络前端也很流行-“拖放”. 作者没有给出具体的实现方式，但引用了一个不错的js库dom-drag.js. 您可以学习大师的源代码，并介绍几个流行的js库，包括jquery. 好了，JavaScript和CSS的评论在这里. 如有任何疑问，请留言进行讨论.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-292236-1.html