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. java中Date与String的相互转化

    1:大体思路 这种转换要用到java.text.SimpleDateFormat类 字符串转换成日期类型: 方法1: 也是最简单的方法 Date date=new Date("2008-04 ...

  2. hive 全局排序

    不分发数据,使用单个reducer ; select * from dw.dw_app where dt>='2016-09-01' and dt <='2016-09-18' order ...

  3. NoSQL数据库探讨之一 － 为什么要用非关系数据库？

    随着互联网web2.0网站的兴起,非关系型的数据库现在成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.而传统的关系数据库在应付 web2.0网站,特别是超大规模和高并发的SNS类型的web2 ...

  4. APPLICATION ERROR #1502 .

    mantisbt出现1502问题解决:引起问题的原因:当提交的问题有分类,此时删除此分类,就会出现下面的情况.问题描述:APPLICATION ERROR #1502 没有找到类别.请使用浏览器的“返 ...

  5. backbone.js学习笔记

    之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...

  6. 你需要知道的swift必备函数 map

    map这东西在oc中并未用过,但是swift在处理数组的时候显得格外的游刃有余,这归功于map这个函数: map函数  arr.map(<#T##transform: (Int) throws ...

  7. NHibernate系列文章十九：NHibernate关系之多对多关系（附程序下载）

    摘要 NHibernate的多对多关系映射由many-to-many定义. 从这里下载本文的代码NHibernate Demo 1.修改数据库 添加Product表 添加ProductOrder表 数 ...

  8. 移动端自动化环境搭建-python的安装

    安装python A.安装依赖 由于 Robot Framework 框架是基于 Python 语言开发的,要想使用 Robot Framework 首先需要有 Python环境. B.安装过程 下载 ...

  9. linux在yum下安装mysql

    1:查看软件是否安装 yum list installed | grep mysql 2:卸载CentOS系统自带mysql数据库 yum -y remove mysql-libs.x86_64,若有 ...

  10. 32、shiro框架入门3.授权

    一. 授权,也叫访问控制,即在应用中控制谁能访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission ...