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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
JS函数基本定义与用法示例
Jan 15 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
javascript document.referrer 用法
2009/04/30 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
学习Node.js模块机制
2016/10/17 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
校园活动策划书范文
2014/01/10 职场文书
后备干部培训方案
2014/05/22 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
《确定位置》教学反思
2016/02/18 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js