很久沒(méi)有發(fā)布文章啦，終于今天有點(diǎn)時(shí)間，就在上班前把我之前所寫(xiě)的為了學(xué)習(xí)JS基礎(chǔ)編寫(xiě)的一些使用JS實(shí)現(xiàn)的網(wǎng)頁(yè)常用特效分享給大家；相關(guān)的代碼我之后也會(huì)放到GitHub上，歡迎大家star；

JS實(shí)現(xiàn)網(wǎng)頁(yè)特效，其實(shí)通俗的說(shuō)就是通過(guò)JS動(dòng)態(tài)地控制css樣式，以達(dá)到實(shí)現(xiàn)動(dòng)畫(huà)的效果；
（很多動(dòng)畫(huà)特效都可以由css3實(shí)現(xiàn)，個(gè)人推薦是能用css3就用css3；這里用Js的目的我前面也說(shuō)了，是為了學(xué)習(xí)JS基礎(chǔ)以及學(xué)習(xí)如何通過(guò)js控制各種節(jié)點(diǎn)）。

首先，實(shí)現(xiàn)了最基本的功能：點(diǎn)擊不同的按鈕切換顯示不同的內(nèi)容；

其次，加了定時(shí)器，用的是setInterval，當(dāng)然用setTimeout也是可以的；

最后，給body綁定了onmouseover和onmouseout事件,鼠標(biāo)移入清除定時(shí)器，移出又添加定時(shí)器。

HTML

    

        

            
首頁(yè)
            
點(diǎn)擊看看
            
會(huì)自動(dòng)的
            
我的網(wǎng)站
        
    
    

        
我的網(wǎng)站
        
JS代碼,導(dǎo)航菜單
        
看到效果了嗎？？？
        
我的網(wǎng)站我做主
    

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

因?yàn)槎际呛芑A(chǔ)的，我就主要講解一下JS部分，后面的案例也一樣，請(qǐng)理解。

var name_0="one";
var cursel_0=1;
var ScrollTime=3000;//循環(huán)周期（毫秒）
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 事件會(huì)在頁(yè)面或圖像加載完成后立即發(fā)生，類(lèi)似與jQuery中的ready事件，推薦都加上，或者也可以使用立即執(zhí)行函數(shù)，這就看個(gè)人喜歡；變量最好是在最開(kāi)始的時(shí)候就聲明，因?yàn)槭褂胿ar聲明的變量會(huì)發(fā)生“聲明提前”，即使你在變量聲明之前調(diào)用也不會(huì)報(bào)錯(cuò)；但是在es6中的let就很好的糾正了這一現(xiàn)象，所以我建議大家要養(yǎng)成一個(gè)好的習(xí)慣，先聲明，在調(diào)用；

一個(gè)圖片彈窗特效，點(diǎn)擊圖片會(huì)顯示大圖，并且可以讀取圖片的alt信息顯示出來(lái)；點(diǎn)擊關(guān)閉按鈕會(huì)關(guān)閉彈窗。

HTML

    
    
    


    


    
    ×
    
    
        
        

CSS

/* 觸發(fā)彈窗圖片的樣式*/
    #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;
    }
    /* 文本內(nèi)容*/
    #caption{
        margin: auto;
        display: block;
        width:80%;
        max-width: 700px;
        text-align:center;
        color:#ccc;
        padding:10px 0;
        height: 150px;
    }
    /* 添加動(dòng)畫(huà)*/
    .modal-content, #caption { 
    -webkit-animation-name: zoom;           /*定義一個(gè)或多個(gè)動(dòng)畫(huà)名稱(chēng)*/
    -webkit-animation-duration: 0.6s;          /*指定對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間*/
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {                     
    from {-webkit-transform:scale(0)}  /*transform屬性向元素應(yīng)用2D或3D轉(zhuǎn)換，scale是元素縮放*/
    to {-webkit-transform:scale(1)}
}
 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
 
/* 關(guān)閉按鈕 */
.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%;
    }
}

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

JS

 // 獲取彈窗
var modal = document.getElementById("myModal");
 
// 獲取圖片插入到彈窗 - 使用 "alt" 屬性作為文本部分的內(nèi)容
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;
}
 
// 獲取  元素，設(shè)置關(guān)閉按鈕
var span = document.getElementsByClassName("close")[0];
 
// 當(dāng)點(diǎn)擊 (x), 關(guān)閉彈窗
span.onclick = function() { 
  modal.style.display = "none";
}

這個(gè)特效使用到的js就比較簡(jiǎn)單，給圖片和關(guān)閉按鈕綁定click事件就可以了。

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

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

使用window.onresize，當(dāng)窗口大小變化的時(shí)候重新計(jì)算窗口寬度，以重新進(jìn)行排版；

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

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

本特效的網(wǎng)頁(yè)內(nèi)容和樣式都很簡(jiǎn)單就不寫(xiě)在這了，主要講解一下js代碼，下面上代碼

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