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.按鈕閃效果實現
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旋轉永脓，4個參數袍辞，分別對應x,y,z軸，類型是number常摧，最后一個參數是旋轉的角度搅吁，最后旋轉的角度為x*d,y*d,z*d,所以前面三個參數為1時就正常旋轉角度，0時不旋轉
transform:perspective
1. perspective屬性設置鏡頭到元素平面的距離落午。所有元素都是放置在z=0的平面上谎懦。比如perspective(300px)表示，鏡頭距離元素表面的位置是300像素溃斋。
2. perspective-origin屬性規(guī)定了鏡頭在平面上的位置界拦。默認是放在元素的中心。
