demo项目开发笔录（页面技巧）

这里记录一些css的实用小技巧

一、

自定义grey颜色渐变，附带常用颜色：

.w3-theme-l5 {color:#000 !important; background-color:#f9f9f9 !important}
.w3-theme-l4 {color:#000 !important; background-color:#ececec !important}
.w3-theme-l3 {color:#000 !important; background-color:#d8d8d8 !important}
.w3-theme-l2 {color:#000 !important; background-color:#c5c5c5 !important}
.w3-theme-l1 {color:#000 !important; background-color:#b1b1b1 !important}
.w3-theme-d1 {color:#fff !important; background-color:#8e8e8e !important}
.w3-theme-d2 {color:#fff !important; background-color:#7e7e7e !important}
.w3-theme-d3 {color:#fff !important; background-color:#6f6f6f !important}
.w3-theme-d4 {color:#fff !important; background-color:#5f5f5f !important}
.w3-theme-d5 {color:#fff !important; background-color:#4f4f4f !important}

.w3-theme-light {color:#000 !important; background-color:#f9f9f9 !important}
.w3-theme-dark {color:#fff !important; background-color:#4f4f4f !important}
.w3-theme-action {color:#fff !important; background-color:#4f4f4f !important}

.w3-theme {color:#fff !important; background-color:#9e9e9e !important}
.w3-text-theme {color:#9e9e9e !important}
.w3-theme-border {border-color:#9e9e9e !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#9e9e9e !important}


.w3-theme-gradient-grey {
    color: #000 !important;
    background:-webkit-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
    color: #000 !important;
    background:-moz-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
    color: #000 !important;
    background:-o-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
    color: #000 !important;
    background:-ms-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
    color: #000 !important;
    background: linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}

效果如下：

二、

给浏览器的页头加上自定义的icon，如下：

效果如下：

三、本地预览头像

笔者这里删减去布局代码，

html如下：

                        

                            

                                
预览头像
                                

                                    
                                        
                                    
                                
                            
                        
                        

这里的html代码也有一个使用技巧，这里规定了正方形图片，将span标签设置为块状，规定宽度（span不能设置高度），然后被包裹的img设置高度为span的宽度，即正方形；若只设置width为100%则宽度按原图，比例缩放。

js 如下：

          $("#realChoiceImg").on('change',function(){
                var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
                fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
                src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
                    // 检查是否是图片
               if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
//                   alert('上传错误,文件格式必须为：png/jpg/jpeg');
                     return;
              }
          $('#currentImg').attr('src',src);

这里的主要记录src的获取方式，不用深究，需要使用时拷贝即可。

笔者作品效果如下：

四、返回顶部

这里记录一个有滑动效果的返回顶部方式

如下：

    ↑ 回到顶部

function toTop(){
     $('html, body').animate({ scrollTop: 0 }, 'fast');//带动画
 }

这里再补充说明下标签调用js方法的方式：

主要就是如上方式 javascript:void(0)，让a标签的链接执行空方法，或者javascript:; 留空，作用和前者一样。

五、html传递的this对象

 
function test(obj){ 
    alert(obj); //[object HTMLInputElement] 
    alert(obj.id); //myinput 
    alert(obj.value); //javascript中onclick中的this 

} 

作用就和jquery$(#title)一样，是获取节点对象。