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: .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.<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( '*' ) ;

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