js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

offsetParent 获取的最近的定位的父元素
offsetLeft/offsetTop 是相对于offsetParent的距离

offsetHeight/offsetWidth 获取盒子的大小 border + height + padding

<style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #ff0000;

        }
        #child {
            width: 100px;
            height: 100px;
            margin-left: 10px;
            background-color: #00ff00;
        }
    </style>
</head>
<body>
    <!--offsetParent-->

    <div id="box">

        <div id="child">

        </div>

    </div>

    <script>
        var child = document.getElementById("child");
        //border + padding + width
        //offsetLeft获取的是相对于offsetParent的距离
        console.log(child.offsetLeft);
        //如果设置的子盒子有定位的父元素，offsetParent就是定位的父元素
        //此处子盒子的父元素没有定位，offsetParent就是body
        console.log(child.offsetParent);
        //父节点--box
        console.log(child.parentNode);
    </script>

2 scrollHeight 滚动内容的高度（height + padding 不包括边框）

 <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: #0000ff;
        }
    </style>
</head>
<body>
<div id="box">
    哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈
    哈哈哈哈哈哈哈哈哈哈
</div>
<script>
    function $$(id){
        return document.getElementById(id);
    }
</script>
<script>
    var box=$$("box");
    console.log(box.scrollHeight);
    //获取撑开的大小
    console.log(box.offsetHeight);
    //获取盒子的大小
</script>

<script>
//    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
//滚动条事件
     window.onscroll=function(){
       console.log(scroll().scrollTop);
     }

</script>

//4 获取页面滚动出去的距离
//document.body.scrollLeft || document.documentElement.scrollLeft
//document.body.scrollTop || document.documentElement.scrollTop
这里会产生浏览器的兼容问题，ie8记一下版本不支持document.body.scrollLeft,只支持document.documentElement.scrollLeft因此我们需要封装这个函数

/**scrollTop与scrollLeft兼容性封装
 *
 * @returns {{scrollTop: number, scrollLeft: number}}
 */
function scroll(){
    return{
        scrollTop:document.body.scrollTop||document.documentElement.scrollTop,
        scrollLeft:document.body.scrollLeft||document.documentElement.scrollLeft
    };
}

动画函数的封装

//获取任意样式
function getStyle(element, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(element,null)[attr];
    }else{
        return element.currentStyle[attr];
    }
}
//在修改单个属性的基础上修改
//1 修改参数，传入对象
//2 遍历对象，获取到所有的属性
//3 把target修改 成 attrs[attr]

function animate(element, attrs, fn) {
    //清除定时器
    if(element.timerId) {
        clearInterval(element.timerId);
    }

    element.timerId = setInterval(function () {
        //问题：当多个属性的最小值到达之后，动画就会停止
        //解决：当所有属性都到达目标值，动画停止

        //假设所有的属性都到达目标值，停止定时器
        var isStop = true;
        //遍历多个属性
        for(var attr in attrs) {

            if(attr === "zIndex") {
                element.style[attr] = attrs[attr];
            }else if(attr === "opacity") {
                //获取当前元素样式属性的值
                var current = parseFloat(getStyle(element, attr)) || 0;
                current *= 100;
                //每一次step的值会越来越小
                var step = (attrs[attr]*100 - current)/8;

                //三目运算符判断步长为正数向上取整 如果为负数向下取整
                step = step > 0 ?  Math.ceil(step):                            Math.floor(step);

                current += step;


                element.style[attr] = current/100;

                //更改ie下的透明度（透明度的兼容问题）
                element.style.filter = "alpha(opacity="+ current +")";

                //如果有一个属性没有到达目标值，不能停止动画
                if(step != 0) {
                    isStop = false;
                }
            }else{
                //获取当前元素样式属性的值
                var current = parseInt(getStyle(element, attr)) || 0;  
                //每一次step的值会越来越小
                var step = (attrs[attr] - current)/8;

                //正数  向上取整   负数 向下取整
                step = step > 0 ?  Math.ceil(step): Math.floor(step);

                current += step;


                element.style[attr] = current + "px";


                //如果有一个属性没有到达目标值，不能停止动画
                if(step != 0) {
                    isStop = false;
                }
            }

        }

        //停止定时器

js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

推荐阅读