学习记录---06api-顶级对象-offset系列-scroll系列-元素的滚动事件-浏览器卷曲的值-变速动画多个样式多个动画-旋转轮播图的原理-client系列

顶级对象

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这两个属性
所以兼容代码应该用页面向上卷曲的距离