1.

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>

注册 onscroll  滚动事件

<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 、动画函数的封装的更多相关文章

  1. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  2. 《JS权威指南学习总结--8.7 函数属性、方法和构造函数》

    内容要点:   在JS程序中,函数是值.对函数执行typeof运算会返回字符串 "function",但是函数是JS中特殊的对象.因为函数也是对象,它们也可以拥有属性和方法,就像普 ...

  3. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  4. 《JS权威指南学习总结--8.6 函数闭包》

    内容要点: 和其他大多数现代编程一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JS函数对象的内部状 ...

  5. 《JS权威指南学习总结--8.3 函数的实参和形参》

    内容要点: 一.可选形参 当调用函数的时候传入的实参比函数声明时指定的形参个数要少,剩下的形参都将设置为undefined值. 例如: //将对象o中可枚举的属性名追加至数组 //如果省略a,则创建一 ...

  6. 《JS权威指南学习总结--第八章 函数》

    内容要点: 一.JS函数是参数化的:函数的定义会包括一个称为形参的标识符列表,这些参数在函数体中像局部变量一样工作.函数调用会为形参提供实参的值.函数使用它们实参的值来计算返回值,成为该函数调用表达式 ...

  7. 移动端滑屏全应用【四】移动端动画贞动画函数mTween封装

    首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅. 1. 首先要记得引入Tween.js 2. 引入mTween.js 3. 调用 * m ...

  8. Node.js用ES6原生Promise对异步函数进行封装

    Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...

  9. js callee,caller学习

    原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...

随机推荐

  1. [CF442B] Andrey and Problem (概率dp)

    题目链接:http://codeforces.com/problemset/problem/442/B 题目大意:有n个人,第i个人出一道题的概率是pi,现在选出一个子集,使得这些人恰好出一个题的概率 ...

  2. php源码之计算两个文件的相对路径

    <?php //计算出两个文件的相对路径即path2相对于$path1的相对路径 // http://www.manongjc.com/article/1342.html function ge ...

  3. Qt 环境下的activex控件编程-------1

    本人第一次接触这种activeX控件的东西,参考了网上很多的教程,终于耗时三个多小时初步理解并编写了一个小demo,现在分享给大家,希望大家少走弯路.步骤如下: 1>像平常创建项目一样创建一个d ...

  4. display:inline-block左右元素上下不对齐

    今天做了两个inline-block元素,出现左右两个元素顶端出现上下不对齐的情况(下图): 解决办法: 把应用 inline-block的元素加上 vertical-align: top; .CSS ...

  5. js进度条实现

    1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...

  6. 使用CodeSmith快速生成映射文件和映射类

    一 CodeSmith简介 本文以表自动生成NHibernate的映射文件和映射类的实例来说明一下本软件的使用方法. CodeSmith是一种基于模板的代码生成工具,其使用类似于ASP.NET的语法来 ...

  7. memcache c++使用

    memcache作为一个内存数据库,快速查询的功能. 在c++下面使用memcache需要一个memcache client.c++版本的是libmemcached http://libmemcach ...

  8. Python自动化 【第八篇】：Python基础-Socket编程进阶

    本节内容: Socket语法及相关 SocketServer实现多并发 1. Socket语法及相关 sk = socket.socket(socket.AF_INET,socket.SOCK_STR ...

  9. kali 虚拟机开启mysql:3306 供主机访问.

    mysql -u root -p use mysql; update user set host='ip' where user='root'; //更新访问权限 flush privileges; ...

  10. zk源码环境搭建

    zk不是使用maven管理的. 将zk的src下的代码导入eclipse,lib下的jar包导入工程. QuorumPeerMain类的main方法是入口,启动了zk的server,参数是conf文件 ...