javascript与CSS复习(三)


Posted in Javascript onJune 29, 2010

我们先来看看如何获取光标相对于整个页面的位置,因为光标位置变量x,y一般通过鼠标事件获取(如mousemove或者mousedown),下面两个通用函数,用于获取光标相对于整个页面的当前位置。

//获取光标的水平位置 
function getX(e) { 
//通用化事件对象 
e = e || window.event; 
//先检查非IE浏览器的位置,在检查IE的位置 
return e.pageX || e.clientX + document.body.scrollLeft; 
} //获取光标的垂直位置 
function getY(e) { 
//通用化事件对象 
e = e || window.event; 
//先检查非IE浏览器的位置,在检查IE的位置 
return e.pageY || e.clientY + document.body.scrollTop; 
}

像在FF中e.pageX就是在整个页面中的X坐标(包括滚动条的滚动距离), 而在IE中e.clientX表示当前显示在用户面前视图中的X坐标,还要加上document.body.scrollLeft(横向滚动条的距离)才是完整的X坐标位置。
下面的一个概念是视口(viewport),可以看作是浏览器滚动条内的一切东西。视口还包含的部分组件是视口窗口、页面和滚动条等。
获得页面的尺寸:
//返回页面的高度(增加内容的时候可能会改变) 
function pageHeight() { 
return document.body.scrollHeight; 
} 
//返回页面的宽度 
function pageWidth() { 
return document.body.scrollWidht; 
}

其中的scrollHeight和scrollWidth(点击查阅),它们详细描述了元素的潜在宽度和高度,而不只是当前所看到的尺寸。
接下来我们要去获取滚动条的位置,换言之页面相对于视口的顶端距离。
//确定浏览器水平滚动位置的函数 
function scrollX() { 
//一个快捷方式,用在IE6/7的严格模式中 
var de = document.documentElement; 
//如果浏览器存在pageXOffset属性,则使用它 
return self.pageXOffset || 
//否则,尝试获取根节点的左端滚动偏移量 
(de && de.scrollLeft) || 
//最后,尝试获取body元素的左端滚动偏移量 
document.body.scrollLeft; 
} //确定浏览器垂直滚动位置的函数 
function scrollY() { 
//一个快捷方式,用在IE6/7的严格模式中 
var de = document.documentElement; 
//如果浏览器存在pageYOffset属性,则使用它 
return self.pageYOffset || 
//否则,尝试获取根节点的顶端滚动偏移量 
(de && de.scrollTop) || 
//最后,尝试获取body元素的顶端滚动偏移量 
document.body.scrollTop; 
}

下面我们来看看如何移动滚动条,我们可以用scrollTo方法,它作为window对象的一个属性而存在,它带有两个参数,即x和y偏移量,可以滚动到视口指定位置,两个例子
//如果需要滚动到浏览器的顶端,可以这么做 
window.scrollTo(0,0) //如果需要滚动到指定元素,则可以这样 
window.scrollTo(0, pageY(document.getElementById('content')));

如果对pageY函数不熟悉了,可以往回复习下,用来获得元素在整个文档中的位置,再给出一遍,让自己也巩固下
//获取元素的Y位置 
function pageY(elem) { 
//查看我们是否位于根元素 
return elem.offsetParent ? 
//如果我们能继续得到上一个元素,增加当前的偏移量并继续往上递归 
elem.offsetTop + pageY(elem.offsetParent): 
//否则,获取当前的偏移量 
elem.offsetTop; 
}

我们下面来学习如何获得视口(viewport)的尺寸,获取视口的尺寸就可以深入了解用户当前可以看到的内容有多少。
//获取视口的高度 
function windowHeight() { 
//一个快捷方式,用在IE6/7的严格模式中 
var de = document.documentElement; 
//如果浏览器存在innerHeight属性,则使用它 
return self.innerHeight || 
//否则,尝试获取根节点高度 
(de && de.clientHeight) || 
//最后,尝试获取body元素的高度 
document.body.clientHeight; 
} //获取视口的宽度 
function windowWidth() { 
//一个快捷方式,用在IE6/7的严格模式中 
var de = document.documentElement; 
//如果浏览器存在innerWidth属性,则使用它 
return self.innerWidth || 
//否则,尝试获取根节点宽度 
(de && de.clientWidth) || 
//最后,尝试获取body元素的宽度 
document.body.clientWidth; 
}

可能你会对innerHeight,clientHeight等属性有些疑惑,那就直接点击它,Mozilla Developer center里解释的很清楚。

最后来讲一个比较有意思的效果,现在web前端中也很流行——"拖拽",作者没有给出具体的实现,而是引用了一个不错的js库,dom-drag.js,可以学习下高手的源码,同时介绍了好几个流行的js库,jquery也在其中。好了javascript与css的复习到这了,有什么问题欢迎留言讨论。

Javascript 相关文章推荐
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
javascript与CSS复习(二)
Jun 29 #Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 #Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 #Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 #Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 #Javascript
javascript hasFocus使用实例
Jun 29 #Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
vue内置指令详解
2018/04/03 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
国外平面设计第一市场:99designs
2016/10/25 全球购物
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
离婚案件原告代理词
2015/05/23 职场文书
教师师德工作总结2015
2015/07/22 职场文书
食堂管理制度范本
2015/08/04 职场文书