js动画 Css提供的运动 js提供的运动

Posted 2021-01-24 一个努力奋斗的小白

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当窗口改变触发