1、CSS样式提供了运动

过度的属性:transition

过度的属性值:attr  ,time  , liner  ,  delay;

值分别是:属性(css),花费的时间,变化的速度(默认匀速),delay延迟;

2、js提供的运动

元素的client  offset  scroll三个系列可以帮助js提供运动

clientWidth/clientHeight/clientTop/clientLeft

offsetWidth/offsetHeight/offsetTop/offsetLeft/offsetParent

scrollWidth/scrollHeight/scrollTop/ScorllLeft(可读可写)

知识点补充

1、获取浏览器的body是有兼容性的

var body=document.body||document.documentElement

2、scrollTop和scrollLeft的最小值为0

3、获取body整个文档的高

document.body.scrollHeight||docuement.documentElement.scrollHeight

4、获取body可视区的高

document.body.clientHeight||docuement.documentElement.clientHeight

5、window常用的两个事件

onscroll 当滚动条滚动的时候触发

onresize 当窗口尺寸发生改变的时候触发

关于js动画简单理解;的更多相关文章

  1. require.js 模块化简单理解

    组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

  4. 对js原型简单的理解和图解

    对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...

  5. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  6. JS闭包的简单理解。优缺点以及垃圾回收机制

    闭包是什么? ·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立:所以都可以访问全局变量 ·为了解决函数外部无法访问函数内局部 ...

  7. 对于js原型和原型链继承的简单理解(第三种,复制继承)

    复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...

  8. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  9. 如何简单理解js中this的指向

    前序 每个人学js都会被this指向这个东西搞得很蒙,那就是this的指向问题.首先,我们要明白 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上thi ...

随机推荐

  1. Bug : Cannot evaluate ...toString()

  2. JSP页面中的小知识

    1.<%…%>和<%!…%>的区别? <%…%>用于在JSP页面中嵌入Java脚本,即代码块 <%!…%>用于在JSP页面中申明变量或方法,可以在该页面 ...

  3. python常用字符串处理(转)

    转自https://www.cnblogs.com/houht/p/3308634.html 判断字符串str是否为空 Approach 1:如果字符串长度为0,说明字符串为空,code如下: isN ...

  4. Oracle Oracle数据库 迁移到 SQL Server上

    原地址:https://blog.csdn.net/LongtengGensSupreme/article/details/81355181

  5. Matlab练习——rpy2tr函数与自己实现的ZYX欧拉角的结果不同的问题

    问题背景:在根据<机器人导论>这本书的Z-Y-X欧拉角原理用Matlab实现旋转矩阵求解时,发现与直接调用机器人工具箱中的rpy2tr()函数得出的结果并不相同. 首先:先检查自己写的函数 ...

  6. js高级-变量内存分析

    var  a = 9, b, c={age:9}, d; b = a; b = 19; console.log(a) console.log(b) d = c; d.age = 22; console ...

  7. 寒假生活第一天——Github初体验

    快开学了,今天体验了一下github这个对我来说很是神秘的东西 它的定义来源于百度百科,如有异议,那就有吧.//gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格 ...

  8. linux 设备驱动分类

    1. 字符设备 :在I/O传输过程中以字符为单位. 2. 块设备: 在传输过程中以块为单位,相关概念有 缓冲,I/O调度,请求队列.主要体现出与字符设备在操作硬件的接口实现方式上是不一样的. 3. 网 ...

  9. svn:Cannot negotiate authentication mechanism

    解决方案:在eclipse->window->preference->team->svn中将svn接口设定为svnkit.

  10. Android Studio SVN配置

    一 . 原文链接:忽略文件[转]    https://blog.csdn.net/buaaroid/article/details/51546521 1.用Android Studio创建一个项目, ...