JavaScript滿天星導航欄實現方法

更新時間：2018年03月08日 08:53:22 作者：FEWY

本篇文章給大家分享了JavaScript滿天星導航欄實現方法，以前也介紹過很多關于特效導航的制作方法，對此有興趣的朋友參考學習下。

說明

分享一個滿天星導航欄的效果，代碼不多，但效果挺好看，先看看效果圖吧。

解釋

實現這個效果，需要掌握的知識不用很多，知道簡單的CSS，會用JS 獲取元素，能綁定事件基本就足夠了。
好的，我們直接來看代碼，注釋已經寫的很詳細了，不想看有注釋的，點這里點擊預覽。

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <style>
body {
 background-color: #000;
 /* 防止出現左右的滾動條 */
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.wrapper {
 width: 100%;
 height: 100px;
}
.wrapper .nav {
 list-style: none;
 width: 800px;
 height: 100px;
 padding: 0;
 margin: 0 auto;
}
.wrapper .nav li {
 width: 25%;
 height: 50px;
 float: left;
 margin-top: 25px;
}
.wrapper .nav li a {
 text-decoration: none;
 color: #fff;
 text-align: center;
 line-height: 50px;
 display: block;
 font-size: 20px;
 font-family: "KaiTi";
}

/* 閃爍的星星 的基本樣式 */
.star {
 width: 5px;
 height: 5px;
 background: #fff;
 position: absolute;
 z-index: -1;
}

/* 閃爍動畫，改變透明度 */
@keyframes blink {
 from {
 opacity: 0.2;
 }
 to {
 opacity: 1;
 }
}
</style>
 </head>
 <body>
 <div class="wrapper">
  <ul class="nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >導航1</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >導航2</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >導航3</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >導航4</a></li>
  </ul>
 </div>
<script>

// 定義一個 starrySky 對象
var starrySky = {
 // 星星的數量
 starNum: 100,

 // 星星的大小，返回一個 2 ~ 12 的隨機數
 starSize () { return 2 + Math.trunc(Math.random() * 10) },

 // 星星的顏色 
 starColor: "#fff",

 // 線的顏色，鼠標進入導航區(qū)域，星星會連成一條線
 lineColor: "#fff",

 // 線的高度
 lineHeight: "3px",

 // 星星連成線的時間
 changeTime: "1s",

 // 初始化方法，生成需要的星星，并調用需要的方法
 init () {
 var html = "";
 // 循環(huán)生成星星
 for (var i = 0; i < this.starNum; i++) {
 html += "<div class='star' id='star" + i + "'></div>";
 }
 // 拼接到 元素wrapper 中
 document.querySelector(".wrapper").innerHTML += html;

 // 調用 星星分散 的方法
 this.disperse();

 // 調用 星星聚合連成線 的方法 
 this.combine();
 },
 disperse () {
 // 這個that 保存的是 starrySky 對象
 var that = this;

 // 獲取 元素wrapper 的寬度
 var width = document.querySelector('.wrapper').offsetWidth;
 // 獲取 元素wrapper 的高度
 var height = document.querySelector('.wrapper').offsetHeight;
 // 循環(huán)，開始在元素wrapper 區(qū)域內，生成規(guī)定數量的 星星，
 for (var i = 0; i < that.starNum; i++) {
 // 星星的 top值，0 ~ 元素wrapper 高度的隨機數
 var top = Math.trunc(height * Math.random());
 // 星星的 left值，0 ~ 元素wrapper 寬度的隨機數
 var left = Math.trunc(width * Math.random());
 // 星星的大小，調用 starrySky對象的starSize()方法
 var size = that.starSize();
 // 設置分散時每個星星樣式
 document.querySelector("#star" + i).style.cssText += `
   top:${top}px;
   left:${left}px;
   width:${size}px;
   height:${size}px;
   background:${that.starColor};
   opacity:${Math.random()};
   border-radius:50%;
   animation:blink 1s ${Math.random() * 2}s infinite alternate;
   `;
 }
 },
 combine () {
 // 這個that 保存的是 starrySky 對象
 var that = this;
 // 查找導航欄 里所有的 a元素，遍歷他們，每個都綁定上 鼠標進入 和 鼠標移出 事件
 document.querySelectorAll(".nav li a").forEach(function (item) {
 item.addEventListener("mouseover", function (e) {
 // 這里的this 是觸發(fā)事件的當前節(jié)點對象，就是鼠標進入時候的 a元素
 // 當前a元素的寬度 / 星星數 = 最后連成線時，星星的寬度
 var width = this.offsetWidth / that.starNum;
 // 遍歷，為每個星星修改樣式，開始連成線
 for (var i = 0; i < that.starNum; i++) {
  // 星星的top 值就是，當前a元素的距離頂部的值 + 當前a元素的高度
  var top = this.offsetTop + this.offsetHeight;
  // 星星的left 值就是，當前a元素的距離左邊界的值 + 第i個星星 * 星星的寬度
  var left = this.offsetLeft + i * width
  // 設置每個星星連成線時的樣式
  document.querySelector("#star" + i).style.cssText += `
     width:${width}px;
     top:${top}px;
     left:${left}px;
     height:${that.lineHeight};
     background:${that.lineColor};
     opacity:1;
     border-radius:0;
     transition:${that.changeTime};
     animation:blink 1s infinite alternate;
    `;
 }
 });
 // 鼠標移出 調用 星星分散 的方法
 item.addEventListener("mouseout", function () {
 that.disperse();
 });
 }
 );
 },

}
// 調用 starrySky對象的 init方法，實現滿天星效果
starrySky.init();
</script>
 </body>
</html>

注意：如果需要修改樣式，不要把 nav元素和 nav 里面的 li元素，給定位了，因為最后線的位置是根據 a元素的 offsetHeight 和 offsetLeft 定位的，如果 nav元素和 nav 里面的 li元素定位了，會改變 a元素的offsetParent元素，位置就不對了。

對offsetHeight、offsetLeft 和 offsetParent 不理解的點這里:https://codepen.io/FEWY/pen/MQdoWX

總結

實現這個效果，就是做了一個 starrySky對象，定義好一些必須的屬性，主要靠 disperse() 和 combine() 兩個方法，需要星星分散的時候調用disperse()，需要星星連成線的時候調用combine()，好的就這樣了。

您可能感興趣的文章:

JavaScript File API實現文件上傳預覽
這篇文章主要為大家介紹了JavaScript File API實現文件上傳預覽，File API將極大地方便 Web 端的文件上傳等操作，本文將介紹 File API的概況，并用兩個實例展示File API的應用，感興趣的小伙伴們可以參考一下
2016-02-02
JavaScript實現留言板案例
這篇文章主要為大家詳細介紹了JavaScript實現留言板案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
js(JavaScript)實現TAB標簽切換效果的簡單實例
本篇文章主要是對js(JavaScript)實現TAB標簽切換效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
JavaScript中統(tǒng)計Textarea字數并提示還能輸入的字符
是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，其實js也可以實現，下面就以示例的方式為大家講解下
2014-06-06
JavaScript實戰(zhàn)之帶收放動畫效果的導航菜單
這篇文章主要為大家詳細介紹了JavaScript實戰(zhàn)之帶收放動畫效果的導航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript判斷頁面加載完之后再執(zhí)行預定函數的技巧
這篇文章主要介紹了JavaScript判斷頁面加載完之后再執(zhí)行預定函數的技巧,原理還是利用監(jiān)聽器監(jiān)聽元素事件、被觸發(fā)則執(zhí)行函數,需要的朋友可以參考下
2016-05-05
JavaScript實現審核流程狀態(tài)的動態(tài)顯示進度條
對于有很多流程的東西，我們希望能夠根據不同的階段，用流程條對應地進行顯示，非常直觀，給用戶帶來極好的用戶體驗，下面小編給大家分享JavaScript實現審核流程狀態(tài)的動態(tài)顯示進度條功能，需要的的朋友參考下
2017-03-03
js實現旋轉木馬輪播圖效果
這篇文章主要為大家詳細介紹了js實現旋轉木馬輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
js canvas實現5張圖片合成一張圖片
這篇文章主要為大家詳細介紹了js canvas實現5張圖片合成一張圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
JavaScript實現的select點菜功能示例
這篇文章主要介紹了JavaScript實現的select點菜功能,涉及javascript動態(tài)操作頁面元素及元素遍歷相關技巧,需要的朋友可以參考下
2017-01-01