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

時間  2019-11-05
標籤 原生 實現 各類 經典 網頁 特效 banner 滾動 選項 切換 廣告 欄目 JavaScript 简体版
原文   原文鏈接

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

         所有都是原生JS實現哦~~根本不須要什麼JQuery、AngularJS等各類類庫，是否是很激動，讓咱們開始吧~web

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

 

特效1、Banner圖滾動

         效果重現：dom

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

         源碼重現：flex

一、  HTML源碼spa

<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源碼

二、  CSS源碼3d

*{

           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源碼

三、JS源碼code

         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源碼

 

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

         效果重現：orm

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

　　效果圖重現：

         源碼重現：

一、  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源碼

二、  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源碼

三、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源碼

 

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

         效果重現：

網頁打開，右下角廣告圖自動彈出，點擊關閉能夠在右下角顯示一橫條。點擊打開，能夠顯示所有廣告窗。 經常使用於客服窗口聊天等場景。

　　效果圖重現：

         源碼重現：

一、  HTML源碼

<div id="div">

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

                    ×

           </div>

</div>
HTML源碼

二、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源碼

三、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源碼

 

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

         效果重現：

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

　　效果圖重現：

         源碼重現：

一、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源碼

二、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源碼

三、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源碼

 

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

         效果重現：

投票列表，能夠根據需求動態的增長刪除選項。。

　　效果圖重現：

         源碼重現：

一、  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源碼

二、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源碼

三、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源碼

 

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

         效果重現：

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

　　效果圖重現：

         源碼重現：

一、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源碼

二、  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源碼

三、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/ 
本文版權歸煙臺傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程