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 相关文章推荐
农历与西历对照
Sep 06 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python中的random()方法的使用介绍
2015/05/15 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python如何计算语句执行时间
2019/11/22 Python
如何教少儿学习Python编程
2020/07/10 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
小学领导班子对照材料
2014/08/23 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
教师年度个人总结
2015/02/11 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
汽车修理厂管理制度
2015/08/05 职场文书