總結(jié)的一些前端常用小細(xì)節(jié)

baiyuxueque

1、點(diǎn)擊聚焦
onfocus="if (value =='請(qǐng)輸入您的電話號(hào)碼'){value =''}" onblur="if (value ==''){value='請(qǐng)輸入您的電話號(hào)碼'}"
相信很多人在寫form表單的時(shí)候能用到。順帶提一下，當(dāng)我們點(diǎn)擊input框時(shí)會(huì)有出現(xiàn)藍(lán)色邊框，我們可以這樣來處理input｛outline:none;｝。

2、ie的透明度兼容
background:#000;filter:Alpha(opacity=60); background:rgba(0,0,0,0.6) none repeat scroll !important;
很多人肯定遇到過，我們?cè)谧鰅e透明度兼容的時(shí)候，經(jīng)常會(huì)用定位的方法，但是這個(gè)不用，有興趣的可以試試看。

3、修改滾動(dòng)條樣式
.test1::-webkit-scrollbar {
width: 6px;
}
.test1::-webkit-scrollbar-track {
background-color:#808080;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test1::-webkit-scrollbar-thumb {
background-color:#ff4400;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
滾動(dòng)條太單一太丑？我們可以這樣試試，參數(shù)可以修改，當(dāng)然ie不兼容的。

4、網(wǎng)頁素裝
html{filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
filter: gray;}

有些時(shí)候的時(shí)候我們需要把網(wǎng)站整體變灰，試試這個(gè)樣式。
怎么學(xué)好web前端？web前端注重的是實(shí)戰(zhàn)項(xiàng)目，你要是真心學(xué)web前端可以來這個(gè)裙，前面是 四一八，中間是三五五，最后是五三一，每天都會(huì)有web前端的視頻教程更新，還有人交流學(xué)習(xí)互相幫助解決各種web前端問題，有專人講解。只要自己認(rèn)真，再加上一起交流，你會(huì)學(xué)到很多的在別的地方學(xué)不到的web前端的知識(shí)以及項(xiàng)目實(shí)戰(zhàn)。

5、返回頂部
function pageScroll(){
//把內(nèi)容滾動(dòng)指定的像素?cái)?shù)（第一個(gè)參數(shù)是向右滾動(dòng)的像素?cái)?shù)，第二個(gè)參數(shù)是向下滾動(dòng)的像素?cái)?shù)）
window.scrollBy(0,-80);
//延時(shí)遞歸調(diào)用，模擬滾動(dòng)向上效果速度
scrolldelay = setTimeout('pageScroll()',10);
//獲取scrollTop值，聲明了DTD的標(biāo)準(zhǔn)網(wǎng)頁取document.documentElement.scrollTop，否則取document.body.scrollTop；因?yàn)槎�者只有一個(gè)會(huì)生效，另一個(gè)就恒為0，所以取和值可以得到網(wǎng)頁的真正的scrollTop值
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判斷當(dāng)頁面到達(dá)頂部，取消延時(shí)代碼（否則頁面滾動(dòng)到頂部會(huì)無法再向下正常瀏覽頁面）
if(sTop==0) clearTimeout(scrolldelay);
}
以上這些，花點(diǎn)時(shí)間百度一下也就能找的到。下面這些是我自己整理的。

6、無縫滾動(dòng)輪播
function gqban(){
left+ = 1; //每次移動(dòng)的像素
if(left>=width){
left=0;
$(".dbdoc ul".css("left",left).find("li:first".appendTo($(".dbdoc ul");
}else{
$(".dbdoc ul".css({left:-left+"px"});
}
}
這個(gè)只是個(gè)引導(dǎo)，有興趣的可以試試修改

7、js 切換樣式
var list_txt=document.querySelectorAll(".artlist_wrap ol li";
for(var i=0;i<list_txt.length;i++){
(function(){
var db_index=i;
list_txt[db_index].onclick=function(){
for(var i=0;i<list_txt.length;i++){
list_txt.className="";
}
this.className="active";
}
})()
}

8、 一些css3知識(shí)點(diǎn)
過渡
transition:屬性 時(shí)間 曲線 延遲時(shí)間;
transition:width 1s linear 2s;
transform:
2D
translate(0px,0px) (位置移動(dòng))
rotate(30deg) (旋轉(zhuǎn))
scale(2,4) (寬度2倍，高度4倍)
skew(30deg,20deg) (X軸30度,Y軸20度)
matrix() （無視）
3D
rotateX(180deg) （上下3D旋轉(zhuǎn)）
rotateY(180deg) （左右3D旋轉(zhuǎn)）
transform-originleft,top)（改變軸心）

9、移動(dòng)端字體自適應(yīng)大小
body{font-family: "Microsoft YaHei";font-size: 0.14rem;color: #666;max-width: 640px;margin: auto;}
@media screen and (min-width: 360px) {
html {font-size: 710%;}
}
@media screen and (min-width: 414px) {
html {font-size: 825%;}
}
@media screen and (min-width: 600px) {
html {font-size: 1095%;}
}
我個(gè)人認(rèn)為這個(gè)還是非常有用的，我每次做移動(dòng)端的東西都會(huì)用到，參數(shù)可以自行修改。

10、css3自適應(yīng)上下左右居中
.aboutlist_wrap ul li a{display:table; }
.aboutlist_wrap ul li a p{display: table-cell;text-align: center;}
.aboutlist_wrap ul li a p{vertical-align: middle;}
我想很多人會(huì)遇到上下居中不能的問題，原理就是把塊級(jí)元素，轉(zhuǎn)換成table，然后vertical-align: middle;就可以了，我就是這么理解的。