首頁 > 文章 > web前端 > 仿作業幫前端教程

仿作業幫前端教程

一个新手原創: 2017-09-13 10:45:071250瀏覽

盒模型

仿作業幫前端教程
標準模式下

box = margin+border+padding+content(width/height)

怪異模式下

box = margin+content(border+padding+width/height)

行動裝置的自適應

flexbox
rem
之後詳細補充

position

relative : 相對於本身在文字流中的位置進行定位，定位後不脫離文字流
absolute : 相對於父元素中非static定位的元素進行定位，定位後脫離文字流
fixed : 相對於瀏覽器視窗進行定位，定位後脫離文字流
static : 正常文字流渲染

<style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    left:20px;        /*以下两张图分别展示*/
        position:relative;        
        position:absolute;    }
    .p2{        
    width:100px;        
    height:100px;        
    background-color:blue;    }
</style>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>

仿作業幫前端教程

#事件代理程式的優點

##原則就是利用事件冒泡

優點可以大量節省記憶體佔用，減少事件註冊。例如ul上代理所有li的click事件。
對於動態內容部分特別適當

缺點事件代理程式的常用應用程式應該僅限於上述需求，如果把所有事件都用事件代理，可能會出現事件誤判。即本不該被觸發的事件被綁定上了事件。

陣列去重

function f(arr){
    var s = [];    
    for(var i = 0;i<arr.length;i++){
        if(s.indexOf(arr[i]) == -1){
            s.push(arr[i]);
        }
    }    return s;
}

如果無法使用indexOf，且需考慮元素類型

function f(arr){
    var s = {};    
    for(var i = 0;i<arr.length;i++){
        var type = typeof arr[i];
        var con = type+arr[i];
        if(!s[con]){
            s[con] = 1;
        }else{
            arr.splice(i,1);
            i--;
        }
    }    return arr;
}

或直接利用ES6的Set

function f(arr){
    var s = new Set(arr);    
    return [...s];
}

實作滑鼠滑過頭像顯示簡介

重點：

1、事件如何綁定
# 我想的是透過事件代理

2、如何保證放置顯示，快速劃過不顯示

利用定時器

以下就用簡陋的程式碼來範例一下。。。

<!DOCTYPE html><html><head><style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    border-radius: 50px;    
    }
    .p2{        
    width:100px;        
    height:200px;        
    margin-top: 10px;        
    background-color:black;        
    display: none;    
    }
    </style>
    </head>
    <body>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>
    <script type="text/javascript">
        var d1 = document.getElementsByClassName(&#39;p1&#39;)[0];        
        var d2 = document.getElementsByClassName(&#39;p2&#39;)[0];        
        var timer;
        d1.addEventListener(&#39;mouseenter&#39;,function(){
            timer = window.setTimeout(function(){d2.style.display="block"},300);
        })
        d1.addEventListener(&#39;mouseout&#39;,function(){
            window.clearTimeout(timer);
            d2.style.display="none";
        })    
        </script>
        </body>
        </html>

以上是仿作業幫前端教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js實作網頁標題滾動下一篇：js實作網頁標題滾動

看更多

仿作業幫前端教程

盒模型

行動裝置的自適應

position

#事件代理程式的優點

function f(arr){ var s = []; for(var i = 0;i<arr.length;i++){ if(s.indexOf(arr[i]) == -1){ s.push(arr[i]); } } return s; }

相關文章