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提供的运动的更多相关文章

  1. 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  2. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  3. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  4. 在js或css后加?v= 版本号不让浏览器缓存

    客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...

  5. 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

    原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文 ...

  6. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  7. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  8. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  9. Web高性能动画及渲染原理(1)CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

随机推荐

  1. git了解-使用笔记

    1.Git的由来与设计理念 Git是linux之父Linus Torvalds开发的,是一款最先进的项目版本控制系统. Git的由来有一个小故事,传闻起初Linux社区工作者都是通过邮件的,发送给li ...

  2. 前端“黑话”polyfill

    前言 在Web前端开发这个日新月异的时代,总是需要阅读一些最新的英文技术博客来跟上技术的发展的潮流.而有时候会遇到一些比较高频的“黑话”,在社区里面可能已经是人人皆知的“共同语言”,而你接触的少就偏偏 ...

  3. Hive数据仓库之快速入门

    Hive定位:ETL(数据仓库)工具 将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的工具,如像:kettle 有关Hive数据导入导出mysql的问题 ...

  4. 面试官问我,Redis分布式锁如何续期?懵了。

    前言 上一篇[面试官问我,使用Dubbo有没有遇到一些坑?我笑了.]之后,又有一位粉丝和我说在面试过程中被虐了.鉴于这位粉丝是之前肥朝的粉丝,而且周一又要开启新一轮的面试,为了回馈他长期以来的支持,所 ...

  5. 第38节:hashCode()与toString()与equals()函数的作用,内部类和匿名内部类

    hashCode()和toString() Hash算法是把任意长度的数据通过hash算法成为散列值 hashCode() public int hashCode(){ int result = 10 ...

  6. Kali学习笔记23:Web渗透简介

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 我这里先说几句: 其实从缓冲区溢出到Web渗透之间还有 ...

  7. Spark基础-scala学习(五、集合)

    集合 scala的集合体系结构 List LinkedList Set 集合的函数式编程 函数式编程综合案例:统计多个文本内的单词总数 scala的集合体系结构 scala中的集合体系主要包括:Ite ...

  8. 三、activiti工作流-流程设计工具

    首先在diagrams下面新建一个文件夹 然后在这个文件夹下new一个Activiti Diagram new好后出现bpmn文件, 可以通过右键以xml方式打开bpmn文件查看源码 双击打开文件然后 ...

  9. SQL笔记之SELECT语句

    SELECT语句的完整语法: SELECT[ALL/DISTINCT]目标列表达式  [AS 别名],··· --ALL不去掉重复 DISTINCT去掉重复 FROM 表名或视图名 或者(SELECT ...

  10. Python GUI之tkinter窗口视窗教程大集合(看这篇就够了)

    一.前言 由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 二.Tkinter 是什么 三.Tkinter 控件详细介绍 1. T ...