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 、动画函数的封装

最新文章

热门文章