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（）添加到 第一个位置