JSで星空ナビゲーションバーを実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSで星空ナビゲーションバーを実装する方法

php中世界最好的语言

Mar 28, 2018 pm 03:01 PM

javascript 成し遂げる

今回はJSでカスミソウのナビゲーションバーを実装する方法を紹介します。JSでカスミソウのナビゲーションバーを実装する際の注意点を実際に見てみましょう。

手順

星空のナビゲーションバーのエフェクトを共有します。コードはそれほど多くありませんが、最初にレンダリングを見てみましょう。

説明

この効果を実現するには、基本的に簡単な 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>
 <p 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>
 </p>
<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 += "<p class=&#39;star&#39; id=&#39;star" + i + "&#39;></p>";
 }
 // 拼接到 元素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 要素と li 要素を nav 内に配置しないでください。最後の行の位置は、nav 要素の offsetHeight と offsetLeft に基づいて配置されるためです。 nav内のli要素とli要素が配置されている場合、a要素のoffsetParent要素が変更され、位置がおかしくなります。

offsetHeight、offsetLeft、offsetParent がわからない場合は、ここをクリックしてください: https://codepen.io/FEWY/pen/MQdoWX

概要

この効果を実現するには、starrySky オブジェクトを作成し、いくつかを定義するだけです必要な属性は主に disperse() と combin() の 2 つのメソッドに依存します。スターを分散する必要がある場合は disperse() を呼び出し、スターを一列に接続する必要がある場合は combin() を呼び出します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue.js で $set を使用して配列を更新する方法

vue.js 配列の位置を移動してビューを更新する方法

以上がJSで星空ナビゲーションバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7518

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

PHP プログラミングガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

プログラミング言語 PHP は、さまざまなプログラミングロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

PHP ゲーム要件実装ガイド Mar 11, 2024 am 08:45 AM

PHP ゲーム要件実装ガイドインターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。

Golang がゲーム開発の可能性を可能にする方法をマスターする Mar 16, 2024 pm 12:57 PM

今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲームシステムの構築に使用されます。

Golangで正確な除算演算を実装する方法 Feb 20, 2024 pm 10:51 PM

Golang で正確な除算演算を実装することは、特に財務計算を含むシナリオや高精度の計算が必要なその他のシナリオでよくあるニーズです。 Golang の組み込みの除算演算子「/」は浮動小数点数に対して計算されるため、精度が失われる場合があります。この問題を解決するには、サードパーティのライブラリまたはカスタム関数を使用して、正確な除算演算を実装します。一般的なアプローチは、math/big パッケージの Rat タイプを使用することです。これは分数の表現を提供し、正確な除算演算を実装するために使用できます。

PHP を使用した SaaS の実装: 包括的な分析 Mar 07, 2024 pm 10:18 PM

リアルタイムのプログラミングガイダンスを提供できないのは誠に申し訳ありませんが、PHP を使用して SaaS を実装する方法をより深く理解していただくためにコード例を提供できます。以下は「PHP を使用した SaaS の実装: 包括的な分析」というタイトルの 1,500 ワード以内の記事です。今日の情報化時代において、SaaS (Software as a Service) は企業や個人がソフトウェアを使用する主流の方法となっており、ソフトウェアにアクセスするためのより柔軟で便利な方法を提供します。 SaaS を使用すると、ユーザーはオンプレミスにいる必要がなくなります

Golangを利用したデータエクスポート機能の実装について詳しく解説 Feb 28, 2024 pm 01:42 PM

タイトル: Golang を使用したデータエクスポート機能の詳細説明情報化の進展に伴い、多くの企業や組織は、データ分析やレポート作成などの目的で、データベースに保存されているデータをさまざまな形式でエクスポートする必要があります。この記事では、Golang プログラミング言語を使用してデータエクスポート機能を実装する方法を紹介します。これには、データベースへの接続、データのクエリ、データのファイルへのエクスポートの詳細な手順が含まれ、具体的なコード例も示されます。最初にデータベースに接続するには、Golang で提供されるデータベースドライバー (da など) を使用する必要があります。

See all articles

JSで星空ナビゲーションバーを実装する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック