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. iBeacon知识1

    iBeacon的数据主要由四种资讯构成,分别是UUID(通用唯一标识符).Major.Minor.Measured Power. UUID是规定为ISO/IEC11578:1996标准的128位标识符 ...

  2. crosswalk-webview

    https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview https://cordova.apache.org/doc ...

  3. Monty Hall Problem的一个图解，感觉不错

    从Coursera.org上的台大概率课讨论组里拿来的 如果不转换,选中汽车的概率是1/3,非常显然. 但转换后选中汽车的概率变成2/3就有点反直觉了,并不是太容易想明白. 因为转换其实有4种:汽车- ...

  4. 重置SQL Server连接池

    EXEC sp_configure 'show advanced options', 1 GO -- To update the currently configured value for adva ...

  5. The listener supports no services解决一例

    The listener supports no services解决一例   Listener动态监听静态监听注册实例 今天做Advacned Replication实验的时候碰到一个问题,启动目标 ...

  6. Scrum学习总结

    在学习的过程中,记录一些重要的东东,一为认真学习,作下归纳总结:二为以后查阅,好记性不如烂笔头!如果大家认为太简单,欢迎喷喷^_^ Scrum:一种迭代式增量软件开发过程,通常用于敏捷软件开发.Scr ...

  7. zookeeper启动。

    package com.autonavi.tinfo.traffic.zookeeper; import java.util.Arrays; import java.util.Collections; ...

  8. eclipse报错 :java was started but returned exit code=13

    一个礼拜没打开自己电脑上的eclipse,一打开居然报错,错误提示如下: cdm运行一下Java -version和javac 运行javac时报错,错误提示如下: 然后发现jdk的bin下没有dt. ...

  9. Hadoop MapReduce编程 API入门系列之小文件合并（二十九）

    不多说,直接上代码. Hadoop 自身提供了几种机制来解决相关的问题,包括HAR,SequeueFile和CombineFileInputFormat. Hadoop 自身提供的几种小文件合并机制 ...

  10. Lock锁的使用示例

    Lock锁是java5用来代替synchronized的一种面向对象的锁的方案 public class LockDemo { /** * Lock是用来替换synchronized, 优点是Lock ...