js特效-day01

 一、自定义动画

animation:flash 0.5s alternate infinite  /*alternate infinite 无限的循环*/

@keyframes flash{

0%{opacity:0;}

100%{opacity:1}

}

二、offset家族（前端必须学会）

网页可见区域宽：document.body.clientWidth;

网页可见区域高：document.body.clientHeight;

网页可见区域宽：document.body.offsetWidth（包括边线的宽）;

网页可见区域高：document.body.offsetHeight（包括边线的宽）;

网页正文的全文宽：document.body.scrollWidth；

网页正文全文的高：document.body.scrollHeight；

网页被卷去的高：document.body.scrollTop；

网页被卷去的左： document.body.scrollLeft;

offsetWidth 和 offsetHeight

获取对象自身的宽度和高度 ，包括内容、边框和内边距，即：offsetWidth = width + border + padding

offsetLeft 和 offsetTop

距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！

---

三、event的常见属性

四、JS常见的事件

1.onmousemove 当鼠标在当前元素中移动时候触发，鼠标移动一次就执行事件

2.onmouseover 鼠标进入当前元素时触发，只会触发一次

3.onmouseup 鼠标弹起时触发

4.onmousedowm 鼠标按下时候触发

---

js特效-day02

一、内置对象document

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:

document.head（获取头部）

document.body（获取身体）

document.title （获取标题）

document.documentElement（获取整个html)

Document.compatMode:

BackCompat：标准兼容模式关闭

浏览器宽度:document.body.clientWidth

二、scroll家族

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

兼容写法var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

三、client家族

left和top分析：

clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度

offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离

scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;

width和height分析

clientWidth\/Height: 内容 + 内边距

offsetWidth\/Height: 内容 + 内边距 + 边框

scrollWidth\/Height: 滚动内容的宽度和高度

四、冒泡排序

阻止冒泡排序的兼容的写法

if(event && event.stopPropagation){ // w3c标准

event.stopPropagation();

}else{ // IE系列 IE 678

event.cancelBubble = true;

}

五、Math 常用的函数

Math.ceil() 向上取整 天花板

Math.ceil(1.11) 结果 是 2

Math.ceil(1.99) 结果 是 2

Math.ceil(-1.5) 结果 是 -1

Math.floor() 向下取整 地板

Math.floor(1.11) 结果 是 1

Math.floor(1.99) 结果 是 1

Math.floor(-1.2) 结果 是 -2

Math.round() 四舍五入

Math.round(1.11) 结果 是 1

Math.round(1.99) 结果 是 2

Math.round(-1.2) 结果 是 -2

六、常见JS访问CSS属性

点语法

box.style.width，box.style.height，box.style.top，box.style.left得到带有单位的属性值，比如：200px； 但是，点语法存在一个很致命的问题，跟在style后面的属性不能由外面传入

下标语法

利用 [] 访问属性 元素.style[“属性”];

这种语法的好处就是可以动态的传递参数作为属性

var h = 'height';

box.style[h] = 300 + 'px'

七、数组的常见操作

pop（）删除最后一个

shift（）删除第一个

push（）追加 添加到最后面

unshift（）添加到 第一个位置