关于js动画简单理解;
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动画简单理解;的更多相关文章
- require.js 模块化简单理解
组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- Js 职责链模式 简单理解
js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...
- 对js原型简单的理解和图解
对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
- JS闭包的简单理解。优缺点以及垃圾回收机制
闭包是什么? ·了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立:所以都可以访问全局变量 ·为了解决函数外部无法访问函数内局部 ...
- 对于js原型和原型链继承的简单理解(第三种,复制继承)
复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...
- 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 首 ...
- 如何简单理解js中this的指向
前序 每个人学js都会被this指向这个东西搞得很蒙,那就是this的指向问题.首先,我们要明白 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上thi ...
随机推荐
- 29.Junit测试框架.md
目录 作用 使用 单个对象的测试 有步骤的测试 注意 作用 用于简化测试,可以对方法,类,包等范围测试 使用 单个对象的测试 在需要测试的方法上加注解@Test,选中方法,运行里选择junit执行 同 ...
- win8安装iis asp.net
http://www.sanrengo.net/thread-62-1-1.html本文主要解决的是在win8操作系统下IIS配置asp.net的运行环境,当然win7的配置方法也大致相似,只有少许部 ...
- stringBuffer和stringBulider的区别
今天去面试了,问了最基础的stringBuffer和stringBulider的区别,我没有回答出来.之前就知道自己的基础很差,没想到这么差. 网上看了一下资料,stringBuffer和string ...
- Pandas时间序列
Pandas时间序列 pandas 提供了一组标准的时间序列处理工具和数据算法 数据类型及操作 Python 标准库的 datetime datetime 模块中的 datetime. time. c ...
- CMake Error at cmake/OpenCVModule.cmake:295 (message): No extra modules found in folder:Please provide path to 'opencv_contrib/modules' folder
其实,我们使用的opencv中要用的contrib/modules 是需要额外下载并在cmakelists.txt中指定的 git clone https://github.com/opencv/ ...
- SSM商城项目(一)
1. 学习计划 1.电商行业的背景. 2.宜立方商城介绍 3.宜立方商城的系统架构 a) 功能介绍 b) 架构讲解 4.工程搭建-后台工程 a) 使用maven搭建工程 b) 使用maven的tomc ...
- NDK环境搭建方法1
1.新建NdkDemo工程 2.新建NdkJniUtils类,在内部声明native方法 3.引用 4.build项目,生成NdkDemo\app\build\intermediates\classe ...
- Linux 机器的渗透测试命令备忘表
如下是一份 Linux 机器的渗透测试备忘录,是在后期开发期间或者执行命令注入等操作时的一些典型命令,设计为测试人员进行本地枚举检查之用. 系统信息命令 对于本地的枚举检查很有用. 基于 Redhat ...
- 使用phpStudy运行伊人集项目
1.首次运行时,需要把system/config/install.look.php以及system/config/database.php(后面这个文件可以先不删除,若是安装过程中数据库报错,再来删除 ...
- TZOJ 1800 Martian Mining(二维dp)
描述 The NASA Space Center, Houston, is less than 200 miles from San Antonio, Texas (the site of the A ...