原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

在製作網頁過程中，我們可能會遇到各種常用的經典網頁特效，比如Banner圖片滾動、選項卡循環播放、右下角廣告彈窗、評論提交展示、選項動態增刪、剪刀石頭布小遊戲等等等。。。是不是感覺都見到過這些場景、那些這些場景都是如何實現的呢？今天，小瑞老師就一口氣把所有經典網頁特效效果送給大家！！！

全部都是原生JS實現哦~~根本不需要什麼JQuery、AngularJS等各種類庫，是不是很激動，讓我們開始吧~

Tips： 可以收藏博客，保存源碼，關鍵時刻Ctrl+C哦~[微笑]

特效一、Banner圖滾動

效果重現：

多張圖片能夠自動實現圖片的循環滾動，點擊右下角導航圖標，可以隨意定位到任何一張。

源碼重現：

1、 HTML源碼

<div id="banner">

      <div id="inside">
　　　　　　<img src="img/banner1.png" id="img1" />
　　　　　　<img src="img/banner2.png" id="img2" />
　　　　　　<img src="img/banner3.png" id="img3" />
　　　　　　<img src="img/banner4.png" id="img4" />
　　　　　　<img src="img/banner1.png" id="img5" />

      </div>

    <ul id="bannerNum">

         <li onclick="changeBanner(1)">1</li>

         <li onclick="changeBanner(2)">2</li>

         <li onclick="changeBanner(3)">3</li>

         <li onclick="changeBanner(4)">4</li>

    </ul>

</div>

HTML源碼

2、 CSS源碼

*{

           padding: 0px;

           margin: 0px;

}

 

#banner{

           width: 100%;

           overflow: hidden;

           white-space: nowrap;

           position: relative;

}

 

#banner #inside{

           width: 9600px;

           position: relative;

           left: 50%;

           margin-left: -960px;

           transition: all 1s ease;

}

 

#banner img{

           width: 1920px;

}

 

#bannerNum{

           padding: 0px;

           list-style: none;

           overflow: hidden;

           width: 160px;

           position: absolute;

           bottom: 30px;

           right: 50px;

}

 

#bannerNum li{

           width: 30px;

           height: 30px;

           background-color: white;

           text-align: center;

           line-height: 30px;

           margin: 0px 5px;

           float: left;

           cursor: pointer;

}

CSS源碼

3、JS源碼

         var num = 1;

                   var inside;

                   window.onload = function(){

                           

                            inside = document.getElementById("inside");

                           

                            var interval = setInterval(function(){

                                     inside.style.transition = "all 1s ease";

                                     num++;

                                     switch (num){

                                               case 1:

                                                        inside.style.transition = "none";

                                                        inside.style.marginLeft = (-960)+"px";

                                                        break;

                                               case 2:

                                                        inside.style.marginLeft = (-960-1920)+"px";

                                                        break;

                                               case 3:

                                                        inside.style.marginLeft = (-960-1920*2)+"px";

                                                        break;

                                               case 4:

                                                        inside.style.marginLeft = (-960-1920*3)+"px";

                                                        break;

                                               case 5:

                                                        inside.style.marginLeft = (-960-1920*4)+"px";

                                                        num = 0;

                                                        break;

                                               default:

                                                        break;

                                     }

                            },2000);

                   }

                  

                   function changeBanner(num1){

                            inside.style.transition = "none";

                            switch (num1){

                                     case 1:

                                               inside.style.marginLeft = (-960)+"px";

                                               break;

                                     case 2:

                                               inside.style.marginLeft = (-960-1920)+"px";

                                               break;

                                     case 3:

                                               inside.style.marginLeft = (-960-1920*2)+"px";

                                               break;

                                     case 4:

                                               inside.style.marginLeft = (-960-1920*3)+"px";

                                               break;

                                     default:

                                               break;

                            }

                           

                            num = num1-1;

                           

                   }

JS源碼

特效二、多選項卡循環滾動播放

效果重現：

某欄目由多個選項卡組成，可以實現多個選項卡不簡單的循環滾動。

　　效果圖重現：

源碼重現：

1、 HTML源碼

<div id="outside">

                    <div id="inside">

                             <div>1</div>

                             <div>2</div>

                             <div>3</div>

                             <div>4</div>

                             <div>5</div>

                             <div>6</div>

                            

                             <div>1</div>

                             <div>2</div>

                             <div>3</div>

                             <div>4</div>

                    </div>

           </div>

HTML源碼

2、 CSS源碼

*{

           margin: 0px;

           padding: 0px;

}

#outside{

           width: 1200px;

           overflow: hidden;

           margin: 0 auto;

           height: 300px;

}

 

#outside #inside{

           width: 3100px;

}

 

#outside #inside div{

           width: 300px;

           height: 300px;

           margin: 0px 5px;

           background-color: red;

           float: left;

}

CSS源碼

3、JS源碼

         var num = 0;

         window.onload = function(){

                   var inside = document.getElementById("inside");

                   setInterval(function(){

                            num-=1;

                            inside.style.marginLeft = num+"px";

                           

                            console.log(inside.style.marginLeft);

                           

                            if(num<=-1860){

                                     num = 0;

                            }

                   },1);

         }

JS源碼

特效三、網頁右下角廣告窗口

效果重現：

網頁打開，右下角廣告圖自動彈出，點擊關閉可以在右下角顯示一橫條。點擊打開，可以顯示全部廣告窗。常用於客服窗口聊天等場景。

　　效果圖重現：

源碼重現：

1、 HTML源碼

<div id="div">

           <div id="close" onclick="closeWin()">

                    ×

           </div>

</div>

HTML源碼

2、CSS源碼

#div{

           width: 300px;

           height: 250px;

           background-color: red;

           position: fixed;

           bottom: -250px;

           right: 0px;

           transition: all 1.5s ease;

}

 

#close{

           width: 20px;

           height: 20px;

           background-color: green;

           text-align: center;

           line-height: 20px;

           float: right;

           margin: 10px;

           cursor: pointer;

}

CSS源碼

3、JS源碼

         var div ;            

         window.onload = function(){

                   div = document.getElementById("div");

                   div.style.bottom = "0px";

         }

        

         function closeWin(){

                   var close = document.getElementById("close");

                   if(close.innerText=="×"){

                            close.innerText = "√";

                            div.style.bottom = "-200px";

                   }else{

                            close.innerText = "×";

                            div.style.bottom = "0px";

                   }

                  

         }

JS源碼

特效四、網頁評論動態添加

效果重現：

輸入用戶名和評論內容，將信息動態追加到已有評論後方。

　　效果圖重現：

源碼重現：

1、HTML源碼

<div id="outside">

           <h3>最新平均</h3>

          

           <div id="comment">

                    <div id="comment1" class="comment1">

                             騰訊網友

                             <span>李二狗</span>

                             <time>2010年10月5日 19:21:12</time>

                             <p>

                                       公務員好啊！可以爲人民幣服務！

                             </p>                                     

                    </div>

           </div>

          

           <h4>發表評論</h4>

          

           <div id="addComment">

                    暱&nbsp;&nbsp;&nbsp;&nbsp;稱：<input type="text" id="name" />

                    <br /><br />

                    評論內容:<textarea id="comContent"></textarea>

                   

                    <button onclick="addComment()">提交評論</button>

           </div>

</div>

HTML源碼

2、CSS源碼

#outside{

           width: 1000px;

           margin: 0 auto;

           border: 1px solid #E7EAEE;

           overflow: hidden;

           padding-bottom: 15px;

}

 

#outside h3{

           width: 95%;

           margin: 15px auto;

           padding-bottom: 10px;

           border-bottom: 1px solid #E7EAEE;

           font-family: "宋體",sans-serif;

}

 

#outside .comment1{

           width: 95%;

           margin: 10px auto;

           color: #BBBBBB;

           font-size: 12px;

           border-bottom: 1px dashed #E7EAEE;

           font-family: "宋體",sans-serif;

}

 

#outside .comment1 time{

           float: right;

}

 

#outside .comment1 span{

           color: #5979B2;

           margin-left: 5px;

           font-weight: bold;

}

 

#outside .comment1 p{

           font-size: 16px;

           color: black;

}

 

#outside h4{

           width: 95%;

           margin: 15px auto;

         color: #404E73;

           font-size: 16px;

           font-weight: bold;

           font-family: "宋體",sans-serif;

}

 

#outside #addComment{

           width: 95%;

           margin: 0 auto;

           font-size: 12px;

           color: #BBBBBB;

}

 

#outside #name{

           width: 200px;

           border: 1px solid #D9E2EF;

}

 

#outside #comContent{

           width: 800px;

           height: 100px;

           resize: none;

           border: 1px solid #D9E2EF;

           vertical-align: text-top;

}

 

#outside button{

           width: 100px;

           height: 30px;

           background-color: #2D46A3;

           color: white;

           border: hidden;

           float: right;

           margin: 15px 100px;

}

CSS源碼

3、JS源碼

                   var idNum = 1;

         function addComment(){

                   idNum++;

                   var inputValue = document.getElementById("name").value;

                   var textValue = document.getElementById("comContent").value;

                  

                   if(inputValue==""||textValue==""){

                            alert("暱稱和評論內容不能爲空！！");

                            return;

                   }

                  

                   var comContent1 = document.getElementById("comment1");

                   var newComment = comContent1.cloneNode(true);

                   newComment.setAttribute("id","comment"+idNum);

                   newComment.getElementsByTagName("span")[0].innerText = inputValue;

                   newComment.getElementsByTagName("p")[0].innerText = textValue;

                  

                  

                   var commentDiv = document.getElementById("comment");

                   commentDiv.appendChild(newComment);

                  

                   document.getElementById("name").value = "";

                   document.getElementById("comContent").value = "";

                  

         }

        

         window.onload = function(){

                   var outside = document.getElementById("outside");

                   console.log(document.styleSheets[0].cssRules[0].style.border);

         }

JS源碼

特效五、投票列表選項增刪

效果重現：

投票列表，可以根據需求動態的增加刪除選項。。

　　效果圖重現：

源碼重現：

1、 HTML源碼

<section id="vote">

           <p class="top">添加新投票</p>

           <div id="bottom">

                    <span>投票內容：</span>

                    <input type="text" name="content" id="content" value="" />

                    <br /><br />

                    <span>投票類型：</span>

                    <input type="radio" name="radio" id="radio1" value="1" checked="checked"/>單選

                    <input type="radio" name="radio" id="radio2" value="" />多選

                    <div id="div1" class="div">

                             <span id="span1">投票選項：</span>

                             <input type="text" name="input1" value="" />

                    </div>

                    <div id="div2" class="div">

                             <span id="span2">　　　　　</span><input type="text" name="input1" value="" />

                    </div>

           </div>

           <div id="button">

                    <button>確定</button>

                    <a href="#" style="text-decoration: underline;" id="big" onclick="more()">增加選項</a>

                    <a href="#" id="small" onclick="close1()">取消操作</a>

           </div>

</section>

HTML源碼

2、CSS源碼

*{

           padding: 0px;

           margin: 0px;

           text-decoration: none;

}

#vote{

           margin: 50px;

           border: 2px solid #80ABD7;

           font-size: 12px;

           padding-bottom: 20px;

}

#vote .top{

           line-height: 30px;

           background-color: #80ABD7;

           color: white;

           padding-left: 10px;

}

#vote #bottom{

           margin-left: 60px;

           padding: 15px 0px 15px 0px;

}

#vote #button{

           margin-left: 60px;

}

#vote #button button{

           padding: 3px 13px;

           background-color: #4A6991;

           color: white;

           font-weight: bold;

           border: none;

           border-radius: 4px;

}

#vote #button a{

           font-size: 12px;

           margin-left: 10px;

}

#vote #bottom .div{

           margin-top: 15px;

}

CSS源碼

3、JS源碼

         var div2=document.getElementById("div2");

         var voteBottom=document.getElementById("bottom");

         var idNum=2;

         function more(){

                   idNum++;

                   var divNew=div2.cloneNode("div2");

                   divNew.setAttribute("id","div"+idNum);

                   var divNewHTML=divNew.innerHTML;

                   divNew.innerHTML=divNewHTML+"<span id='shanchu' style='color:blue;' onclick='delate("+idNum+")'>刪除</span>";

                   voteBottom.appendChild(divNew);

         }

        

         function delate(num){

                   var divDelate=document.getElementById("div"+num);

                   divDelate.style.display="none";

         }

 

         function close1(){

                   //event.preventDefault();

                   window.close();

         }

JS源碼

特效六、剪刀石頭布手機小遊戲

效果重現：

手機小遊戲，剪刀石頭布。

　　效果圖重現：

源碼重現：

1、HTML源碼

<div id="body">

           <div id="tips">

                    請選擇

           </div>

          

           <div id="imgs">

                    <img src="img/jiandao.png" id="jiandao" />

                    <img src="img/shitou.png" id="shitou" />

                    <img src="img/bu.png" id="bu" />

           </div>

          

         <div id="jieguo">

                    <div class="jieguo">

                             <div>您選擇了</div>

                             <img src="img/wenhao.png" id="myImg" />

                    </div>

                   

                    <div class="pk">PK</div>

                   

                    <div class="jieguo">

                             <div>系統選擇了</div>

                             <img src="img/wenhao.png" id="computer" />

                    </div>

         </div>

          

           <div id="score">

                    等待結果中....

           </div>

          

           <div id="scoreFen">

                    <span>00</span>：<span>00</span>

           </div>

</div>

HTML源碼

2、 CSS源碼

*{

           margin: 0px;

           padding: 0px;

}

 

#body{

           width: 100%;

           height: 700px;

           max-width: 500px;

           margin: 0 auto;

           background-color: #FAE738;

           overflow: hidden;

}

 

#tips{

           margin-top: 40px;

           text-align: center;

           color: white;

           font-size: 36px;

           font-weight: bold;

}

 

#imgs{

           width: 90%;

           margin: 20px auto;

           display: flex;

           justify-content: space-around;

}

 

#jieguo{

           width: 90%;

           margin: 30px auto;

           display: flex;

           justify-content: space-around;

}

 

#jieguo .jieguo div{

           height: 30px;

           width: 89px;

           line-height: 30px;

           text-align: center;

           color: white;

}

 

#jieguo .jieguo img{

           height: 89px;

}

 

#jieguo .pk{

           height: 120px;

           line-height: 120px;

           font-size: 48px;

           font-weight: bold;

}

 

#score,#scoreFen{

           text-align: center;

           font-size: 24px;

           color: red;

           padding-top: 10px;

}

CSS源碼

3、JS源碼

var jiandao = document.getElementById("jiandao");

var shitou = document.getElementById("shitou");

var bu = document.getElementById("bu");

var myImg = document.getElementById("myImg");

var computer = document.getElementById("computer");

var score = document.getElementById("score");

var scoreFen = document.getElementById("scoreFen");

 

var myScore=0,comScore=0;

 

var imgs = ["img/jiandao.png","img/shitou.png","img/bu.png"];

 

jiandao.onclick = function(){

         var imgSrc = jiandao.getAttribute("src");

         myImg.setAttribute("src",imgSrc);

         checkImg(imgSrc);

}

 

shitou.onclick = function(){

         var imgSrc = shitou.getAttribute("src");

         myImg.setAttribute("src",imgSrc);

         checkImg(imgSrc);

}

 

bu.onclick = function(){

         var imgSrc = bu.getAttribute("src");

         myImg.setAttribute("src",imgSrc);

         checkImg(imgSrc);

}

 

 

function checkImg(imgSrc){

         var myIndex = imgs.indexOf(imgSrc);

         var intervalId = setInterval(function(){

                   var num = parseInt(Math.random()*3);

                   computer.setAttribute("src",imgs[num]);

         },20);

        

         setTimeout(function(){

                   clearInterval(intervalId);

                   var comSrc = computer.getAttribute("src");

                   var comIndex = imgs.indexOf(comSrc);

                   if(myIndex==comIndex){

                            score.innerHTML = "平局！再戰一輪吧！";

                   }else if(myIndex==0&&comIndex==2

                            || myIndex==1&&comIndex==0

                            || myIndex==2&&comIndex==1){

                            score.innerHTML = "贏啦！繼續虐他吧！";

                            myScore++;

                   }else{

                            score.innerHTML = "輸啦！繼續努力吧！";

                            comScore++;

                   }

                   myScore = (myScore+"").length<2?"0"+myScore:myScore+"";

                   comScore = (comScore+"").length<2?"0"+comScore:comScore+"";

                  

                   scoreFen.firstElementChild.innerHTML = myScore;

                   scoreFen.lastElementChild.innerHTML = comScore;

                  

         },400);

}

JS源碼

　　好了，今天的課程就到這了，需要源碼的同學，可以聯繫小瑞老師獲取哦~~留存一份源碼，總有用到的時候哦~~

　　PS：大家還需要什麼功能，可以在評論區留言哦~傑瑞教育的老師可以幫助大家制作後，給大家分享最新源碼~

作者：傑瑞教育
出處：http://www.cnblogs.com/jerehedu/
本文版權歸煙臺傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

JQuery自定義插件詳解之Banner圖滾動插件

使用Canvas製作畫圖工具

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

MUI框架開發HTML5手機APP(一)--搭建第一個手機APP

LESS IS MORE

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結