WEB实战原生JS开发

1.效果一：实现鼠标放在文字上的时候，文字的颜色逐渐发生变化    原理：字体准备颜色不同的两份，然后进行定位来覆盖，实际上就是hover的时候字体的宽度发生变化，并设置transition实现渐变的效果html：<ul id="nav">    <li>        <a href="javascript:;">            <div class="up">Course</div>            <div class="down">Course</div>        </a>    </li></ul>
css：#nav li .up{    position: absolute;    left: 0;    top: 0;    color: black;    width: 0%;    overflow: hidden;    transition: .5s 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.<a href="javascript:;"></a>中的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('*');    vararr = []; //把想要的元素添加到数组中    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: 200px;        position: relative;        left: 50%;        margin-left: -1000px;    }

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，而是要用visibilityvisibility: 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.如果多个定位的话一定要注意层级问题