第1章 offset家族
1.1 三大家族和一个事件对象
三大家族(offset/scroll/client)
事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制)
1.2 Offset家族简介
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
1.2.1 offsetWidth和offsetHight (检测盒子自身宽高+padding+border)
这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding +border;
offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;
1.2.2 offsetLeft和offsetTop (检测距离父盒子有定位的左/上面的距离)
返回距离上级盒子(带有定位)左边的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
1.2.3 offsetParent (检测父系盒子中带有定位的父盒子节点)
1、返回改对象的父级 (带有定位)
如果当前元素的父级元素没有进行CSS定位 (position为absolute或 relative,fixed), offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 (position为absolute或 relative,fixed), offsetParent取最近的那个父级元素。
1.3 offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。此时是相对于body,而 style.left不可以,所以要设置盒子的style.left,那么首先要做的是设置盒子本身的定位,这样才有left属性
二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
style.left在=的左边和右边还不一样。(左边的时候是属性,右边的时候是值)
要用定时器,先清除定时器
第2章 动画和封装
1.5 动画的种类
1.5.1 闪现(基本不用)
1.5.2 匀速(今天重点)
1.5.3 缓动(以后重点)
1.6 动画原理
盒子的位置 = 盒子本身所在的位置+步长。
第1章 第二系列scroll
1.1 Scroll家族组成
1.1.1 ScrollWidth和scrollHeight(不包括border)
检测盒子的宽高。(调用者:节点元素。属性。)包括内容和padding
盒子内容的宽高。(如果有内容超出了,显示内容的高度)
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
1.1.2 scrollTop和scrollLeft
网页被浏览器遮挡的头部和左边部分。意思就是说,由于滚动条的向上拉,有一部分是被遮挡住的,这一部分就是scrollTop,被卷去的头部和左边部分。
document.title --- 文档标题;
document.head --- 文档的头标签
document.body --- 文档的body标签;
document.documentElement --- 这个很重要 获得HTML标签
直接把scroll封装,return一个json对象,然后通过调用scroll().top就可以得到对应的不同浏览器卷去的宽高。
//简单封装(实际工作使用)
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
offsetWidth和offsetHeight指的仅仅只是这个元素,比如DIV元素的宽和高,包括padding和边框,但是scrollHeight和scrollWidth指的是包括由于溢出而无法展示在网页的不可见部分,比如说DIV中的内容有1000px,但是盒子只有400px,但是
最后的高度还是1000px,意思说就是包括内容,不超出的话则指的是盒子本身的高度。
//json回顾
var json = {"aaa":111,"bbb":222};
//遍历方法for...in... (一般数组和dom对象不使用本方法)
for(var k in json){
console.log(k); //属性
console.log(json[k]); //值:第二种属性绑定和获取值的方法
}
1.鼠标指针相对于屏幕的坐标:screenX/Y
2.相对于页面且不考虑滚动条是否滚动:clientX/Y,X/Y
3.相对于页面且考虑滚动条:pageX/Y,layerX/Y,offsetX/Y
1.1 阻止冒泡
w3c的方法是:(火狐、谷歌、IE11)
event.stopPropagation()
IE10以下则是使用:event.cancelBubble = true
兼容代码如下:
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}