자 바스 크 립 트 별 탐색 표시 줄 구현 방법

6447 단어 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",

 //     ，        ，        
 lineColor: "#fff",

 //     
 lineHeight: "3px",

 //         
 changeTime: "1s",

 //      ，       ，        
 init () {
 var html = "";
 //       
 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;
 //   ，     wrapper    ，          ，
 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             ，          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 요소 의 offset Height 와 offset Left 에 따라 포 지 셔 닝 되 기 때 문 입 니 다.nav 요소 와 nav 에 있 는 li 요소 가 포 지 셔 닝 되면 a 요소 의 offset Parent 요 소 를 바 꾸 고 위치 가 맞지 않 습 니 다.
offset Height,offset Left,offset Parent 에 대해 이해 하지 못 하 는 점 은 다음 과 같다https://codepen.io/FEWY/pen/MQdoWX
총결산
이 효 과 를 실현 하 는 것 은 스타 리 스 카 이 대상 을 만 들 고 필요 한 속성 을 정의 하 는 것 입 니 다.주로 disperse()와 combine()두 가지 방법 으로 별 이 분산 되 어야 할 때 disperse()를 호출 하고 별 이 연결 되 어야 할 때 combine()을 호출 하 는 것 입 니 다.좋 습 니 다.이렇게 되 었 습 니 다.
vue-cli 비 계 를 사용 하여 Vue 프로젝트 의 프로젝트 구 조 를 초기 화 합 니 다.
vue.js 의 computed,filter,get,set 의 용법 및 차이 점 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage