知識點總結(jié)

1.使用瀏覽器的navigator對象判斷當前是否是在手機端和微信端

function is_pc(){
    var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo","SymbianOS");  
    var info = navigator.userAgent;
    var len = os.length;
    for (var i = 0; i < len; i++) {
        if (info.indexOf(os[i]) > 0){
            return false;
        }
    }
    return true;
}
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true; 
    }else{
       return false;
    }
}

2.減少if for在編程中的使用

    1.三元運算符
    2.if分支多的話改用switch
    3.使用短路判斷 &&、||
    if(XXX){
         test()
    }
    // 改動后
    XXX && test() 表示如果XXX為真,返回test,否則返回XXX
    
    if(!XXX){
        test()
    }
    // 改動后
    XXX ||  test()表示如果XXX為假,返回test,否則返回XXX

3.按鈕閃效果實現(xiàn)

    1.首先畫好按鈕。
    2.使用before偽元素繪制透明菱形的滑動方塊,閃的效果就是來自菱形的移動
    3.使用動畫讓菱形偽元素移動起來即可
    .first-page .bottom-btn span{
      display: block;
      height:40px;
      line-height:40px;
      overflow: hidden;
      margin:0 9px 0 7px;
      position: relative;
    }
    
    .first-page .bottom-btn  span:before{
      content: ' ';
      position: absolute;
      width:80px;
      height:350px;
      top:0;
      left:-150px;
      transform: skew(-25deg);
      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
    }
    @keyframes leftToRight {
      0%{left:-150px;}
      100%{left:250px}
    }

4.transform屬性

    transform:rotate3d(x,y,z,d)
    這個比較好理解,3d旋轉(zhuǎn),4個參數(shù),分別對應x,y,z軸,類型是number,最后一個參數(shù)是旋轉(zhuǎn)的角度,最后旋轉(zhuǎn)的角度為x*d,y*d,z*d,所以前面三個參數(shù)為1時就正常旋轉(zhuǎn)角度,0時不旋轉(zhuǎn)
    
    transform:perspective
    
    1. perspective屬性設置鏡頭到元素平面的距離。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,鏡頭距離元素表面的位置是300像素。
    2. perspective-origin屬性規(guī)定了鏡頭在平面上的位置。默認是放在元素的中心。


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容