js动画 Css提供的运动 js提供的运动
1. 动画
(1) Css样式提供了运动
过渡的属性transition 从一种情况到另一种情况叫过渡
Transition:attr time linear delay;
Attr 是变化的属性
Time 是花费的时间
Linear 变化的速度
Delay 是延迟
复习background:url() no-repeat 50% 50% red;
Background-image
Background-repeat
Background-position
Background-color
(2)js提供的运动
元素的client offset scroll三个系列
clientWidth/clientHeight/clientTop/clientLeft
offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent
scrollWidth/scrollHeight/scrollTop/scrollLeft
这十三个属性,前面一个是只读属性,scrollTop和scrollLeft是即可读又可写
获取浏览器body属性是有兼容性的
var aa=document.body||document.document.documentElement
scrollTop和scrollLefyt的最小值0
获取body整个文档的高
document.body.scrollHeight||document.documentElement.scrollHeight
获取浏览器一屏幕的高(浏览器可视区)
document.body.clientHeight||document.documentElement.clientHeight
window下的两个事件
onscroll当滚动条滚动触发
onresize当窗口改变触发
js动画 Css提供的运动 js提供的运动的更多相关文章
- 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题
在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...
- 第十一节:Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- 在js或css后加?v= 版本号不让浏览器缓存
客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文 ...
- Lining.js - 为CSS提供 ::nth-Line 选择器功能
在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
随机推荐
- TIME_WAIT状态过多的排查
一.概述 (一)现象 服务器有两个现象,第一是tcp连接数不多,不超过10个,但是time_wait状态的2000.第二个按照以往的性质,在很少用户访问的情况下,服务器的资源几乎没有使用,比如CPU, ...
- 大叔学ML第二:线性回归
目录 基本形式 求解参数\(\vec\theta\) 梯度下降法 正规方程导法 调用函数库 基本形式 线性回归非常直观简洁,是一种常用的回归模型,大叔总结如下: 设有样本\(X\)形如: \[\beg ...
- MapReduce多种join实现实例分析(一)
一.概述 对于RDBMS中的join操作大伙一定非常熟悉,写sql的时候要十分注意细节,稍有差池就会耗时巨久造成很大的性能瓶颈,而在Hadoop中使用MapReduce框架进行join的操作时同 ...
- 每天学点SpringCloud(四):Feign的使用及自定义配置
Feign:SpringCloud的官网对它的定义是这样的: 是一个声明式的Web服务客户端.它支持Feign本身的注解.JAX-RS注解以及SpringMVC的注解.Spring Cloud集成Ri ...
- PHP删除当前目录及其目录下的所有文件
使用PHP遍历一个目录下的所有目录及文件,并删除该目录及其目录下的所有子目录和文件,本次代码通过递归的方式来实现. 用到的函数: scandir($path) 遍历一个目录下所有文件并返回数组. un ...
- Kali学习笔记3:TCPDUMP详细使用方法
Kali自带Wireshark,但一般的Linux系统是不带的,需要自行下载,并且过程略复杂 而纯字符界面的Linux系统无法使用Wireshark 但是,所有Linux系统都会安装TCPDUMP:一 ...
- 【shiro】(2)---基于RUL的权限管理
基于RUL的权限管理 我想在写shiro权限管理认证前,先来一个基于URL实现的权限管理控制. 一.基于URI的权限业务逻辑 实现思路: 将系统操作的每个url配置在权限表中,将权限对应 ...
- Spring 事务传播实践分析
事务管理是应用系统开发中必不可少的一部分.事物将若干的数据库操作作为一个整体控制,一起成功或一起失败.事物有以下特性 原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. ...
- python args kwargs 传递参数的区别
先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...
- 第一个NHibernateDemo
什么是Nhibernate,Nhibernate是一个面向.Net环境的对 象/关系数据库映射工具.(ORM) 1.搭建项目基本框架: (1)创建MVC项目,命名为NHShop.Web. (2)依次分 ...