JS基礎(chǔ)特效---網(wǎng)頁(yè)常用特效

xuxueli 發(fā)布于2019-08-01 17:35 / 1016人閱讀

1、前言

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

2、JS實(shí)現(xiàn)特效的概念

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

3、案例1--選項(xiàng)卡

3.1、案例分析

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

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

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

3.2案例實(shí)現(xiàn)過程 3.2.1編寫網(wǎng)頁(yè)的內(nèi)容和樣式

HTML




點(diǎn)擊切換選項(xiàng)卡代碼



    
        
            首頁(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)理解。

3.2.2實(shí)現(xiàn)特效

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

4、案例2--圖片彈窗

4.1、案例分析

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

4.2、案例實(shí)現(xiàn)過程 4.2.1編寫網(wǎng)頁(yè)的內(nèi)容和樣式

HTML




    
    javascript圖片彈窗
    


    


    
    ×

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)畫*/
    .modal-content, #caption { 
    -webkit-animation-name: zoom;           /*定義一個(gè)或多個(gè)動(dòng)畫名稱*/
    -webkit-animation-duration: 0.6s;          /*指定對(duì)象動(dòng)畫的持續(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代碼，部分注解我寫在了注釋中；那在這里就重點(diǎn)說一下css3中的動(dòng)畫，可以使用@keyframes規(guī)則創(chuàng)建動(dòng)畫。創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。在動(dòng)畫過程中，您可以更改CSS樣式的設(shè)定多次。指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成；然后使用animation添加動(dòng)畫。記得要注意兼容性，在webkit內(nèi)核的瀏覽器中要加前綴。

 // 獲取彈窗
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事件就可以了。

5、案例3--瀑布流

5.1、案例分析

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

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

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

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

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

本特效的網(wǎng)頁(yè)內(nèi)容和樣式都很簡(jiǎn)單就不寫在這了，主要講解一下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)聽滾輪事件
      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é)
雖然我這里寫的是js實(shí)現(xiàn)特效，但是如果能用css實(shí)現(xiàn)，那么最后是用css，這就看哪種方法方便了，擇優(yōu)嘛；好啦，今天就寫這三個(gè)案例吧，希望大家看完這三個(gè)案例，能夠有些想法，最后是要?jiǎng)邮謱憣?，光看是沒有用的。
最后，謝謝各位的觀看，想看源代碼的可以去我的GitHub上，歡迎star或者添加更多的js特效；如果有哪里寫的不好也請(qǐng)指出來(lái)，我會(huì)馬上去改正；如果感到對(duì)你有用歡迎收藏點(diǎn)贊！謝謝！

GPU云服務(wù)器云服務(wù)器 JS常用特效網(wǎng)頁(yè)特效 java 網(wǎng)頁(yè) 特效 javascript網(wǎng)頁(yè)特效

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51246.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xuxueli

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 1281·2023-04-25 23:22
tensorflow配置

閱讀 1680·2023-04-25 20:04
web前端和后端的區(qū)別在哪？

閱讀 2654·2021-11-22 15:24
Linux——Ubuntu使用個(gè)給力的鏡像，安裝軟件速度飛快

閱讀 2816·2021-11-11 16:54
自己動(dòng)手寫一個(gè)側(cè)導(dǎo)航欄組件

閱讀 1894·2019-08-30 14:03
水平垂直居中小結(jié)

閱讀 1492·2019-08-29 16:35
多享開發(fā)微商城有哪些步驟？

閱讀 1711·2019-08-26 10:29
前端解決第三方圖片防盜鏈的辦法 - html referrer 訪問圖片資源403問題

閱讀 2679·2019-08-23 18:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS基礎(chǔ)特效---網(wǎng)頁(yè)常用特效

相關(guān)文章