JS基礎特效---網頁經常使用特效

時間 2019-11-05

原文原文鏈接

一、前言

好久沒有發佈文章啦，終於今天有點時間，就在上班前把我以前所寫的爲了學習JS基礎編寫的一些使用JS實現的網頁經常使用特效分享給你們；相關的代碼我以後也會放到GitHub上，歡迎你們star；javascript

二、JS實現特效的概念

JS實現網頁特效，其實通俗的說就是經過JS動態地控制css樣式，以達到實現動畫的效果；
（不少動畫特效均可以由css3實現，我的推薦是能用css3就用css3；這裏用Js的目的我前面也說了，是爲了學習JS基礎以及學習如何經過js控制各類節點）。css

三、案例1--選項卡

3.一、案例分析

首先，實現了最基本的功能：點擊不一樣的按鈕切換顯示不一樣的內容；html
其次，加了定時器，用的是setInterval，固然用setTimeout也是能夠的；java
最後，給body綁定了onmouseover和onmouseout事件,鼠標移入清除定時器，移出又添加定時器。css3

3.2案例實現過程

3.2.1編寫網頁的內容和樣式

HTMLgit

<!DOCTYPE html>
<html lang="en">
<head>
<title>點擊切換選項卡代碼</title>
</head>
<body>
<div class="tab1" id="tab1">
    <div class="menu">
        <ul>
            <li id="one1" onclick="setTab('one',1)">首頁</li>
            <li id="one2" onclick="setTab('one',2)">點擊看看</li>
            <li id="one3" onclick="setTab('one',3)">會自動的</li>
            <li id="one4" onclick="setTab('one',4)">個人網站</li>
        </ul>
    </div>
    <div class="menudiv">
        <div id="con_one_1">個人網站</div>
        <div id="con_one_2" style="display:none;">JS代碼,導航菜單</div>
        <div id="con_one_3" style="display:none;">看到效果了嗎？？？</div>
        <div id="con_one_4" style="display:none;">個人網站我作主</div>
    </div>
</div>
<div style="text-align:center;clear:both;"></div>
</body>
</html>

CSSes6

* {
    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部分，後面的案例也同樣，請理解。github

3.2.2實現特效

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; i<links_len; i++){
        links[i].onmouseover=function(){
            clearInterval(iIntervalId);
            this.onmouseout=function(){
                iIntervalId = setInterval(Next,ScrollTime);;
            }
        }
    }
    document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
        clearInterval(iIntervalId);
        this.onmouseout=function(){
            iIntervalId = setInterval(Next,ScrollTime);;
        }
    }
    setTab(name_0,cursel_0);
    iIntervalId = setInterval(Next,ScrollTime);
}
function setTab(name,cursel){
    cursel_0=cursel;
    for(var i=1; i<=links_len; i++){
        var menu = document.getElementById(name+i);
        var menudiv = document.getElementById("con_"+name+"_"+i);
        if(i==cursel){
            menu.className="off";
            menudiv.style.display="block";
        }
        else{
            menu.className="";
            menudiv.style.display="none";
        }
    }
}
function Next(){
    cursel_0++;
    if (cursel_0>links_len)cursel_0=1
    setTab(name_0,cursel_0);
}

注意：onload 事件會在頁面或圖像加載完成後當即發生，相似與jQuery中的ready事件，推薦都加上，或者也可使用當即執行函數，這就看我的喜歡；變量最好是在最開始的時候就聲明，由於使用var聲明的變量會發生「聲明提早」，即便你在變量聲明以前調用也不會報錯；可是在es6中的let就很好的糾正了這一現象，因此我建議你們要養成一個好的習慣，先聲明，在調用；web

四、案例2--圖片彈窗

4.一、案例分析

一個圖片彈窗特效，點擊圖片會顯示大圖，而且能夠讀取圖片的alt信息顯示出來；點擊關閉按鈕會關閉彈窗。瀏覽器

4.二、案例實現過程

4.2.1編寫網頁的內容和樣式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript圖片彈窗</title>
    </head>
<body>
<!-- 觸發彈窗，圖片改成你的圖片地址 -->
    <img id="myImg" src="images/img.jpg" alt="文本描述信息" width="300" height="200">
<!-- 彈窗 -->
<div class="modal" id="myModal">
    <!-- 關閉按鈕 -->
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
    <!-- 彈窗內容 -->
    <img class="modal-content" id="img01">
        <!-- 文本描述 -->
        <div id="caption"></div>
</div>
</body>
</html>

/* 觸發彈窗圖片的樣式*/
    #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內核的瀏覽器中要加前綴。

// 獲取彈窗
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;
}
 
// 獲取 <span> 元素，設置關閉按鈕
var span = document.getElementsByClassName("close")[0];
 
// 當點擊 (x), 關閉彈窗
span.onclick = function() { 
  modal.style.display = "none";
}

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

五、案例3--瀑布流

5.一、案例分析

瀑布流佈局被普遍運用於圖片展現，可是展現的圖片須要寬度相等，而高度能夠自適應；
使用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<imgData.data.length;i++) {//js建立節點，並設置屬性
          var ccontent = document.createElement("div");
          ccontent.className = "box";
          cparent.appendChild(ccontent);
          var boximg = document.createElement("div");
          boximg.className = "box_img";
          ccontent.appendChild(boximg);
          var Img = document.createElement("img");
          Img.src = "img/" + imgData.data[i].src;
          boximg.appendChild(Img);
        }
      }
      imglocation("container","box");//排版函數
    }

    window.onresize = function() {//當窗口改變時再次調用排版函數
      imglocation("container","box");
    }
  }

排版函數

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<ccontent.length;i++){
      if(i<num){
        BoxheightArr[i] = ccontent[i].offsetHeight;
        ccontent[i].style = "";
      } else {
        var minHeight = Math.min.apply(null,BoxheightArr);
        var minIndex = getminheightLocation(BoxheightArr,minHeight);
        ccontent[i].style.position = "absolute";
        ccontent[i].style.top = minHeight + "px";
        ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
        BoxheightArr[minIndex] = BoxheightArr[minIndex] + ccontent[i].offsetHeight;
      }
    }
  }

完整代碼請到GitHub上觀看，歡迎star

總結

雖然我這裏寫的是js實現特效，可是若是能用css實現，那麼最後是用css，這就看哪一種方法方便了，擇優嘛；好啦，今天就寫這三個案例吧，但願你們看完這三個案例，可以有些想法，最後是要動手寫寫，光看是沒有用的。
最後，謝謝各位的觀看，想看源代碼的能夠去個人GitHub上，歡迎star或者添加更多的js特效；若是有哪裏寫的很差也請指出來，我會立刻去改正；若是感到對你有用歡迎收藏點贊！謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。