顶级对象
BOM中的顶级对象:window
DOM中的顶级对象Document
JQuery顶级对象:$ ----> JQuery
元素的在style中的样式属性是无法直接通过:对象.style.属性来获取
offset系列
offsetLeft
距离左边的位置(距离最近的具有定位的父级元素的距离 距离包括margin和padding和border 获取不了通过transform的产生距离值
offsetTop
距离上边的位置
offsetWidth
元素的宽(有边框)
offsetHeight
元素的高(有边框)
offsetParent
元素参照谁做定位,元素.offsetParent就是谁;当元素为fixed定位时,元素.offsetParent 为null
注意
: offset系列属性只读,不写
scroll系列
卷曲------滚出去
scrollWidth
元素内容的实际宽(没有边框),如果没有内容就是元素的宽
scrollHeight
元素内容的实际高(没有边框),如果没有内容就是元素的高
scrolltTop
向上卷取出去的距离,就是拉动滚动条滚出去的内容
scrollLeft
向左卷取出去的距离,就是拉动滚动条滚出去的内容
元素的滚动事件
元素对象.onscroll=function() {}
例子--实时获取向上卷曲出去的距离的值
dvObj.onscroll=function() {
console.log(this.scrollTop);
}
获取浏览器向上卷曲出去的距离,向左卷曲出去的距离
- window.pageYoffset -----浏览器向上卷曲的距离
- document.documentElement.scrollTop–html向上卷曲的距离
- document.body.scrollTop–body向上卷曲出去的距离
因为有的浏览器不支持其中一种的方法,所以需要封装函数,并且若是三种写法都不支持,那么就返回0
封装页面向上卷曲的值
function getScorll() {
return {
left: window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0
}
}
变速动画函数封装
起主要作用的就是step的大小要随着时间改变
function annimate1(element, target, time) {
//清除定时器
clearInterval(element.timeId);
// 获取元素的初始位置
var left = element.offsetLeft;
// 设置定时器
element.timeId = setInterval(function () {
// 设置步长--不固定
var step = (target-left)/10;
step = step > 0?Math.ceil(step):Math.floor(step);
left += step;
element.style.left = left + 'px';
if (target==left) {
clearInterval(element.timeId);
}
//测试
console.log('当前位置'+left+'速度'+step+'目标距离'+target);
}, time);
}
window.getComputedStyle(元素,伪的东西)伪的东西—伪元素,伪类什么的 没有就写null
返回值是一个对象—对象里面是css中所有的样式属性
所以我们可以通过返回值获取到css里所有的样式
(offsetLeft只能获取元素和左边的距离 若是没有脱标,就算你设置了left也获取不到offsetLeft的值)
上面的方法不支持ie8
ie8的写法
元素.currentStyle 返回的是css样式的对象
元素.currentStyle.left
如果元素的样式中没有这个属性,会返回auto或者0
兼容代码
获取一个元素的任意一个样式属性
//获取一个元素的任意一个样式属性
function getStyle(element,attr) {
return window.getComputedStyle(element,null)?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
设置任意元素的任意一个属性动画
// 获取任意元素的任意属性动画
function animate(element, attr, target) {
//防止点击多次产生多个定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的初始位置
var x = parseInt(getStyle(element, attr));
console.log(x);
//设置步长
var step = 10;
// 设置step的正负
step = x < target ? step : -step;
// console.log(left < target);
// console.log(left);
// 需要走的值
x += step;
if (Math.abs(target - x) > Math.abs(step)) {
element.style[attr] = x + 'px';
}
else {
clearInterval(element.timeId);
element.style[attr] = target + 'px';
}
}, 50);
}
设置元素的多个样式属性动画
// 获取任意元素的任意属性动画--将任意元素要改变的属性和值放在一个对象中
function animateMany(element, object) {
//防止点击多次产生多个定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的初始位置
for (var attr in object) {
var x = parseInt(getStyle(element, attr));
// 设置目标距离
var target = object[attr];
//设置步长
var step = 10;
// 设置step的正负
step = x < target ? step : -step;
// 需要走的值
x += step;
element.style[attr] = x + 'px';
if (target == x) {
clearInterval(element.timeId);
}
//测试
console.log('当前位置' + x + '速度' + step + '目标距离' + target);
}
}, 50);
}
封装缓动动画函数增加回调函数
function annimateMoreAni(element, obj, fn) {
//清除定时器
clearInterval(element.timeId);
// 设置定时器
element.timeId = setInterval(function () {
var flag = 1;
// 设置步长--不固定
for (var attr in obj) {
// 获取元素的初始位置
var left = parseInt(getStyle(element, attr));
console.log(getStyle(element, attr));
var target = obj[attr];
var step = (target - left) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
left += step;
element.style[attr] = left + 'px';
if (left != target) {
flag = 0;
}
}
if (flag) {
clearInterval(element.timeId);
if (fn){
fn();
}
}
//测试
console.log('当前位置' + left + '速度' + step + '目标距离' + target);
}, 50);
}
把数组中的第一个数放到数组的最后
arr.push(arr.shift())
client系列
clientWidth
只有内容的宽+padding,没有边框
clientHeight
只有内容的高+padding,没有边框
clientLeft
左边边框的宽度
clientTop
上边框的宽度
图片跟着鼠标飞
document.οnmοusemοve=function(e){}
里面有一个参数
在谷歌和火狐中可以用e来调用
在ie8中要用
window.event
兼容写法
document.onmousemove=function(e) {
e = window.event||e;
//可视区域的横坐标
my$('img').style.left = e.clientX+'px';
//可视区域的纵坐标
my$('img').style.top = e.clientY+'px';
}
图片跟着鼠标飞优化
document.onmousemove=function(e) {
//页面的横坐标
my$('img').style.left = e.pageX+'px';
//页面的纵坐标
my$('img').style.top = e.pageY+'px';
}
上面写法ie8不支持 ie8没有pageX这两个属性
所以兼容代码应该用 页面向上卷曲的距离