我在工作中总结的一些前端常用小细节（转载）

1、点击聚焦

onfocus="if (value =='请输入您的电话号码'){value =''}" onblur="if (value ==''){value='请输入您的电话号码'}"

相信很多人在写form表单的时候能用到。顺带提一下，当我们点击input框时会有出现蓝色边框，我们可以这样来处理input｛outline:none;｝。

2、ie的透明度兼容

background:#000;filter:Alpha(opacity=60); 
background:rgba(0,0,0,0.6) none repeat scroll !important;

很多人肯定遇到过，我们在做ie透明度兼容的时候，经常会用定位的方法，但是这个不用，有兴趣的可以试试看。

3、修改滚动条样式

.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;
}

滚动条太单一太丑？我们可以这样试试，参数可以修改，当然ie不兼容的。

4、网页素装

html{filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
filter: gray;}

有些时候的时候我们需要把网站整体变灰，试试这个样式。

5、返回顶部

function pageScroll(){
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    window.scrollBy(0,-80);
    //延时递归调用，模拟滚动向上效果速度
    scrolldelay = setTimeout('pageScroll()',10);
    /*获取scrollTop值，声明了DTD的标准网页取 document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值*/
    var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if(sTop==0) clearTimeout(scrolldelay);
}

以上这些，花点时间百度一下也就能找的到。下面这些是我自己整理的。

6、无缝滚动轮播

function gqban(){
    left+ = 1; //每次移动的像素
    if(left>=width){
    left=0;
    $('.dbdoc ul').css("left",left).find("li:first").appendTo($(".dbdoc ul"));
    }else{
        $(".dbdoc ul").css({left:-left+"px"});
    }
}

这个只是个引导，有兴趣的可以试试修改

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[i].className="";
            }
        this.className="active";
        }
    })()
}

8、一些css3知识点
过渡

transition:属性 时间 曲线 延迟时间;
transition:width 1s linear 2s;
transform:
2D
translate(0px,0px) (位置移动)
rotate(30deg) (旋转)
scale(2,4) (宽度2倍，高度4倍)
skew(30deg,20deg) (X轴30度,Y轴20度)
matrix() （无视）
3D
rotateX(180deg) （上下3D旋转）
rotateY(180deg) （左右3D旋转）
transform-origin:(left,top)（改变轴心）

9、移动端字体自适应大小

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%;}
}

我个人认为这个还是非常有用的，我每次做移动端的东西都会用到，参数可以自行修改。

10、css3自适应上下左右居中

.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;}

我想很多人会遇到上下居中不能的问题，原理就是把块级元素，转换成table，然后vertical-align: middle;就可以了，我就是这么理解的。

我们在平时工作中，还会遇到很多效果，这里就整理这么多了，希望对大家有用，大家共勉，学无止境。

本文原创发布于慕课网，转载请注明出处，谢谢合作！

原文链接（特此声明）：http://www.imooc.com/article/8997

我在工作中总结的一些前端常用小细节 （转载）

猜你喜欢

我在工作中总结的一些前端常用小细节（转载）