很久沒有發布文章啦，終于今天有點時間，就在上班前把我之前所寫的為了學習JS基礎編寫的一些使用JS實現的網頁常用特效分享給大家；相關的代碼我之后也會放到GitHub上，歡迎大家star；

JS實現網頁特效，其實通俗的說就是通過JS動態地控制css樣式，以達到實現動畫的效果；
（很多動畫特效都可以由css3實現，個人推薦是能用css3就用css3；這里用Js的目的我前面也說了，是為了學習JS基礎以及學習如何通過js控制各種節點）。

首先，實現了最基本的功能：點擊不同的按鈕切換顯示不同的內容；

其次，加了定時器，用的是setInterval，當然用setTimeout也是可以的；

最后，給body綁定了onmouseover和onmouseout事件,鼠標移入清除定時器，移出又添加定時器。

HTML

    

        

            
首頁
            
點擊看看
            
會自動的
            
我的網站
        
    
    

        
我的網站
        
JS代碼,導航菜單
        
看到效果了嗎？？？
        
我的網站我做主
    

CSS

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a, img {
    border: 0;
}
body {
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
}
.tab1 {
    width: 401px;
    border-top: #cccccc solid 1px;
    border-bottom: #cccccc solid 1px;
    margin: 50px auto 0 auto;
}
.menu {
    height: 28px;
    border-right: #cccccc solid 1px;
}
.menu li {
    float: left;
    width: 99px;
    text-align: center;
    line-height: 28px;
    height: 28px;
    cursor: pointer;
    border-left: #cccccc solid 1px;
    color: #666;
    font-size: 14px;
    overflow: hidden;
    background: #E0E2EB;
}
.menu li.off {
    background: #FFFFFF;
    color: #336699;
    font-weight: bold;
}
.menudiv {
    height: 200px;
    border-left: #ccc solid 1px;
    border-right: #ccc solid 1px;
    border-top: 0;
    background: #fefefe
}
.menudiv div {
    padding: 15px;
    line-height: 28px;
}

因為都是很基礎的，我就主要講解一下JS部分，后面的案例也一樣，請理解。

var name_0="one";
var cursel_0=1;
var ScrollTime=3000;//循環周期（毫秒）
var links_len,iIntervalId;
window.onload=function(){
    var links = document.getElementById("tab1").getElementsByTagName("li")
    links_len=links.length;
    for(var i=0; ilinks_len)cursel_0=1
    setTab(name_0,cursel_0);
}

注意：onload 事件會在頁面或圖像加載完成后立即發生，類似與jQuery中的ready事件，推薦都加上，或者也可以使用立即執行函數，這就看個人喜歡；變量最好是在最開始的時候就聲明，因為使用var聲明的變量會發生“聲明提前”，即使你在變量聲明之前調用也不會報錯；但是在es6中的let就很好的糾正了這一現象，所以我建議大家要養成一個好的習慣，先聲明，在調用；

一個圖片彈窗特效，點擊圖片會顯示大圖，并且可以讀取圖片的alt信息顯示出來；點擊關閉按鈕會關閉彈窗。

HTML

    
    
    


    


    
    ×
    
    
        
        

CSS

/* 觸發彈窗圖片的樣式*/
    #myImg{
        border-radius: 5px;
        cursor:pointer;
        transition:0.3s;
    }
    #myImg:hover{opacity:0.7;}
    /* 彈窗背景*/
    .modal{
        display:none;   /*Hidden by default*/
        position: fixed;/* Sit in place*/
        z-index: 1;/* Sit on top*/
        padding-top:100px;/* Location of the box*/
        left:0;
        top: 0;
        width:100%;/* Full width*/
        height: 100%;/*  Full width*/
        overflow: auto;
        background-color: rgba(0,0,0,0.9);/*  Black w/ opactity*/
    }
    /* 圖片*/
    .modal-content{
        margin: auto;
        display: block;
        width:80%;
        max-width: 700px;
    }
    /* 文本內容*/
    #caption{
        margin: auto;
        display: block;
        width:80%;
        max-width: 700px;
        text-align:center;
        color:#ccc;
        padding:10px 0;
        height: 150px;
    }
    /* 添加動畫*/
    .modal-content, #caption { 
    -webkit-animation-name: zoom;           /*定義一個或多個動畫名稱*/
    -webkit-animation-duration: 0.6s;          /*指定對象動畫的持續時間*/
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {                     
    from {-webkit-transform:scale(0)}  /*transform屬性向元素應用2D或3D轉換，scale是元素縮放*/
    to {-webkit-transform:scale(1)}
}
 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
 
/* 關閉按鈕 */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
 
/* 小屏幕中圖片寬度為 100% */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

簡單講解一下CSS代碼，部分注解我寫在了注釋中；那在這里就重點說一下css3中的動畫，可以使用@keyframes規則創建動畫。創建動畫是通過逐步改變從一個CSS樣式設定到另一個。在動畫過程中，您可以更改CSS樣式的設定多次。指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當動畫完成；然后使用animation添加動畫。記得要注意兼容性，在webkit內核的瀏覽器中要加前綴。

JS

 // 獲取彈窗
var modal = document.getElementById("myModal");
 
// 獲取圖片插入到彈窗 - 使用 "alt" 屬性作為文本部分的內容
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
 
// 獲取  元素，設置關閉按鈕
var span = document.getElementsByClassName("close")[0];
 
// 當點擊 (x), 關閉彈窗
span.onclick = function() { 
  modal.style.display = "none";
}

這個特效使用到的js就比較簡單，給圖片和關閉按鈕綁定click事件就可以了。

瀑布流布局被廣泛運用于圖片展示，但是展示的圖片需要寬度相等，而高度可以自適應；

使用js獲取圖片寬度、獲取窗簾寬度，計算一行能容納的圖片個數，然后獲取圖片的高度，控制從第二行開始的圖片先排在上一行中高度最低的下面，以此形成瀑布流的布局；

使用window.onresize，當窗口大小變化的時候重新計算窗口寬度，以重新進行排版；

使用window.onscroll，當滾動滾輪時，判斷是否顯示到最后一張圖片，在這之前會從模擬的數據中讀取圖片地址，再添加到頁面里，使得頁面可以一直滾動下去，模擬了百度圖片的效果；

在css中加入了過渡，使得圖片位置變化的時候有過渡效果；

本特效的網頁內容和樣式都很簡單就不寫在這了，主要講解一下js代碼，下面上代碼

window.onload = function(){ //判斷頁面內容與樣式是否加載完畢
    imglocation("container","box");
    var imgData = {"data":[{"src":"img2.jpg"},{"src":"img3.jpg"},{"src":"img4.jpg"},{"src":"img5.jpg"},{"src":"img6.jpg"}]};//模擬的圖片地址
    
    window.onscroll = function(){//監聽滾輪事件
      if(checkFlag()){//checkFlag()是判斷是否快要顯示最后一張圖，如果是返回true，否則返回false
        for(var i = 0;i
排版函數
function imglocation(parent,content) {
    //將parent中內容全部取出,獲取所有的圖片
    var ccontent = getChildElement(cparent,content);
    var imgWidth = ccontent[0].clientWidth;//圖片的寬度
    var OWidth = document.documentElement.clientWidth;//窗口寬度
    var num = Math.floor(OWidth/imgWidth);//計算一行能擺放的圖片數
    cparent.style.cssText = "width:" + imgWidth * num + "px;margin: 0 auto;";
    //設置css樣式
    var BoxheightArr = [];
    for(var i = 0;i
完整代碼請到GitHub上觀看，歡迎star
總結
雖然我這里寫的是js實現特效，但是如果能用css實現，那么最后是用css，這就看哪種方法方便了，擇優嘛；好啦，今天就寫這三個案例吧，希望大家看完這三個案例，能夠有些想法，最后是要動手寫寫，光看是沒有用的。
最后，謝謝各位的觀看，想看源代碼的可以去我的GitHub上，歡迎star或者添加更多的js特效；如果有哪里寫的不好也請指出來，我會馬上去改正；如果感到對你有用歡迎收藏點贊！謝謝！