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. mybatis配置优化

    1.加入日志log4j 1)加入jar包:log4j-1.2.17.jar 2)加入log4j配置文件: 可以使properties或者xml形式 log4j.rootLogger = DEBUG,C ...

  2. WANem2.3

    http://downloads.sourceforge.net/wanem http://openmaniak.com/wanem_network.php 只能以iso方式运行,安装到硬盘后无法保存 ...

  3. No.3__C#

    起步的迷思 周二:今天起来,天上下着小雨,气温降低了许多.从上周的二十多度又回到了七八度的样子.多穿了一件衣服,顶着寒风就出门了,确实是有点冷.到了公司,已经八点四十几了.有些小疲倦,头晕晕沉沉的,不 ...

  4. 使用eclipse搭建hadoop开发环境

    下载一个 hadoop-eclipse-plugin-*.jar的eclipse插件,并放在plugins目录下 重启eclipse   打开视象,找“大象” 连接HDFS   success 编程准 ...

  5. android 实现桌面显示内容

    //获取windowmanager 对象 WindowManager wm = (WindowManager) getApplicationContext().getSystemService(WIN ...

  6. Analyze network packet files very carefully

    As a professional forensic guy, you can not be too careful to anlyze the evidence. Especially when t ...

  7. writel(readl(&pwm_timer->tcfg0) | 0xff, &pwm_timer->tcfg0);

    解析这句代码什么意思! 神说:选定预分频器0 为什么? 神说:因为实验中选的是timer1,在预分频器0下: 若选择timer4,该如何写这句代码? 首先看tcfg0中选择预分频器1,在看tcfg1里 ...

  8. logging日志模块

    为什么要做日志: 审计跟踪:但错误发生时,你需要清除知道该如何处理,通过对日志跟踪,你可以获取该错误发生的具体环境,你需要确切知道什么是什么引起该错误,什么对该错误不会造成影响. 跟踪应用的警告和错误 ...

  9. 解析工具Goson

    /** * 解析申请分配座位席别 * @param json * @return */ public static TrainOrderResponse getTrainOrder(String js ...

  10. 手机刷机软件与ROM的盈利模式分析

    一. 智能手机的兴起不过短短几年时间,更新迭代已经让实体键盘成为回忆.智能手机带来的是人们生活习惯的改变,对于手机的重度依赖,是好是坏不去评价.智能手机相对于之前的手机最大的改变不仅仅是屏幕的飞速变大 ...