WEB实战原生JS开发
1.效果一：实现鼠标放在文字上的时候，文字的颜色逐渐发生变化
原理：字体准备颜色不同的两份，然后进行定位来覆盖，实际上就是hover的时候字体的宽度发生变化，并设置transition实现渐变的效果
html：
css：
#nav
li .
up{
position:
absolute
;
left:
0
;
top:
0
;
color:
black
;
width:
0%
;
overflow:
hidden
;
transition:
.5
s width
;
//控制变化的只有宽度
}
#nav
li:
hover .
up{
width:
100%
;
}
2.在设置高度：xxx.style.height = xxxHeight的时候一定要注意带上+ 'px'，不然就会出错
3.元素如果设置了float属性，就很难做到居中操作了，这时就可以用display：inle-block代替float浮动
（1）如果没有获得居中的效果的话，检查position是否正确，或者是加上width：100%看看
4.手型点击 —— cursor：pointer
手型不能点击 —— cursor：default
5.180翻转之后转过去的元素隐藏的属性：
backface-visibility：
hidden；
6.让一个背景图居中的话，背景图与父级的高度保持奇偶性，否则会出现抖动的现象
7.一定要注意浏览器的兼容性问题：-webkit-
8.1弧度 = 360 / 2π ——> 180 / π
1角度 = 2π / 360 —— > π / 180
9.在canvas中如何让多个物体进行运动
开两个定时器，一个定时器负责连续绘制+改要连续绘制的数据；一个定时器用来添加相关的元素
1.写网页的时候首先写重置样式（css）
（1）.在css最开始的时候先写一些重置样式（因为css会自带一些样式是我们不需要的），注释
/*reset start*/
/*reset start*/
（2）.设置公共样式
<1>清除浮动
.
clear
{
zoom
:
1
}
.
clear
:
after
{
content
:
""
;
display
:
block
;
clear
:
both
;
}
2.写完重置样式之后再来写网页的html框架，写框架的时候可以先把容易部分的css样式写了
3.中的
javascript:;是一个伪协议，可以让我们通过一个链接来调用js函数，在保留a标签特征的前提下禁止跳转功能（因为一般html中a标签是让点击链接就打开一个网页，如果写href="#
"的话点击a标签之后就会跳转到首页，但很多时候a标签只是作为一个按钮，并不希望实现跳转的功能
）
4.如果一个元素里面有可能会出现相对于这个元素的相对定位的话，就给这个元素设置position：relative
5.加了绝对定位“position：absolute”的元素不占位置，前提是必须要给直接父级元素加相对定位“position：relative”
4.margin、padding是不用搭配position使用的，也不会受到float的影响
5.如果一个操作里面包含了多个功能，就不要在这个操作里面写全部功能的实现代码，应该在这个操作外面定义实现每个功能的函数，然后在该操作里面调用函数就好
6.获取可视区的宽高的浏览器兼容写法：
window.innerWidth || document.documentElement.clientWidth
每个li的高度和可视区域的高度是相关的，在js中用可视区域的高度减去header的高度就能得到每个li的高度了
7.当你想要获取所有特定元素，但是有不需要特定元素下的子元素时可以在js中封装一个专门用来获取类名的函数
function getByClass(oParent,sClass){} //参数1：父级 参数2：类名
//因为li里面可能还会有li，所以如果直接用上面定义的$()方法的话有可能就会获取所有li下的子li，所以需要封装一个获取类名的函数
function
getByClass
(oParent
,
sClass){
//获取所有的元素
var
aElem = oParent.getElementsByTagName(
'*'
)
;
var
arr = []
;
//把想要的元素添加到数组中
for
(
var
i =
0
;
i < aElem.
length
;
i ++){
if
(aElem[i].className === sClass){
//如果每一个元素的className都等于传进去的sClass
arr.
push
(aElem[i])
;
//匹配成功的就加入数组中
}
}
return
arr
;
//最后返回这个数组
}
8.背景图分辨率较大时默认是从左侧开始平铺的，如何让分辨率较大的背景图居中？
给背景图所在的元素添加：
width：图片的宽
position：relative；
left：50%；
margin-left：-背景图片的宽度/2；
例如：
#list
.
liList
{
width
:
200
px
;
position
:
relative
;
left
:
50
%
;
margin-left
: -
1000
px
;
}
9.使背景图分辨率自适应浏览器大小变化：
window.onresize = fnResize；
10.鼠标滚轮事件：
·火狐：DOMMouseScroll（DOM事件必须要通过绑定的方式去写 addEventListener）
·IE、google：onmousewheel
所以绑定鼠标滚轮事件的时候一定要作兼容处理
oContent.
addEventListener
(
'DOMMouseScroll'
,
function
(){}
,
false
)
;
//做不同浏览器兼容的时候一般用if语句
if
(oContent.
addEventListener
){
oContent.
addEventListener
(
'DOMMouseScroll'
,
function
(){
alert
(
123
)
;
}
,
false
)
;
}
oContent.
onmousewheel
=
function
(){
alert
(
444
)
;
}
;
10.如果不加以限制的话，鼠标滚轮滚动的时候滑屏会进行快速的切换，这是因为鼠标滚轮是连续触发的，会导致代码的执行非常快，要解决就要用到“延迟处理”思想，用定时器控制
11.改变盒模型
box-sizing：border-box
12.animation动画是没有办法设置display的，只能设置visibility，所以在切换显示隐藏并且要求边运动边隐藏的时候不能设置display，而是要用visibility
visibility
:
visible；
显示
visibility
:
hidden
；
隐藏
13.在animation属性中translateZ(具体数值px)旋转操作，其中Z轴是表示离我们远近的轴，离我们远就是负的，近就是正的
translate( , ) 前面的参数是x轴方向的偏移，后面的参数是y轴方向的偏移
scale() 设置放大/缩小的倍数
rotate(数值deg) 有rotateY()绕y轴旋转，rotateX()绕x轴旋转，顺时旋转为负值，逆时针旋转为正值
14.设置动画的3D属性
perspective：800px；
15.设置了自定义属性data-src的时候在js里面
dataset.src获取
16.如果多个定位的话一定要注意层级问题