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,最后一个参数是旋转的角度,最后旋转的角度为xd,yd,z*d,所以前面三个参数为1时就正常旋转角度,0时不旋转
transform:perspective
1. perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。
2. perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。