[まとめ] JavaScript で実装できる 3 つの興味深い機能

JavaScript は、Web フロントエンド開発で広く使用されているスクリプト言語であり、小さな関数を実装するための豊富なリソースがあります。この記事では、読者が JavaScript のアプリケーションをさらに理解できるように、いくつかの興味深い小さな関数の実装を紹介します。

1. マウス フォロワー

マウス フォロワーは、マウスの動きに合わせて要素を移動できるようにする小さな機能です。このダイナミックな効果は人々にインタラクティブな感覚を与え、ウェブサイトの装飾に適しています。

実装方法:

1. まず、アイコンやテキストなど、マウスの動きに追従する必要がある要素を HTML ファイル内に定義します。

<div class="follow"></div>

2. CSSで基本スタイルを設定し、要素の位置を固定配置に設定します。

.follow {
   ...
   position: fixed;
}

3. JavaScript でマウス リスニング イベントを追加し、要素の位置を変更して、マウスの位置に合わせて移動させます。

document.addEventListener('mousemove', (event) => {
  const followItem = document.querySelector('.follow');
  followItem.style.left = event.clientX + 'px';
  followItem.style.top = event.clientY + 'px';
})

2. 画像カルーセル

画像カルーセルは、Web サイトでよく使用される優れたインタラクティブ効果であり、画像の表示内容を切り替える機能があります。異なる画像を切り替えると、連続的でスムーズなアニメーション効果が得られます。

実装方法:

1. まずデザイン要件に合わせて、HTML ファイル内に img タグを使用するか、CSS で背景画像を設定するいくつかの画像を定義します。

<div class="slider">
    <img src="./img/1.jpg" />
    <img src="./img/2.jpg" />
    <img src="./img/3.jpg" />
</div>

2. CSS で画像カルーセルのコンテナ スタイルを設定して、カルーセル フレームを構築します。

.slider {
   width: 100%;
   height: 500px;
   overflow: hidden;
  position: relative;
}

3. JavaScript にタイマーを追加して、画像の回転を制御します。

setInterval(() => {
   // 定时器要做的事情
}, 2000); // 每2秒执行一次

4. タイマー内で、CSS のtransform プロパティを使用して、画像の切り替えアニメーション効果を実現します。

let index = 0; // 初始值为0
const slider = document.querySelector('.slider');
const imgs = slider.children; // 获取容器内所有img元素
setInterval(() => {
   index++;
   if(index === imgs.length) {
      index = 0;
   }
   const showImg = imgs[index];
   showImg.classList.add('show');
   ... // 隐藏其他图片
}, 2000);

3. 展開と折りたたみ

Web ページでは、多くの場合、初期の非表示を設定する必要があり、ユーザーは展開された機能モジュールをクリックできます。この機能モジュールの実装は、JavaScript と CSS を使用して完了できます。

実装方法:

1. まず展開・折りたたみが必要なモジュールをHTMLファイル内に記述します。

<div class="box">
   <div class="title">更多</div>
   <div class="content" style="display: none">
      ...
   </div>
</div>

content 要素の style 属性は、display を none に設定します。これは、初期状態では要素が非表示であることを意味します。

2. CSS で基本スタイルを設定し、クリック イベントのイベント リスナーを追加します

.box .title {
   cursor: pointer;
}

3. JavaScript ファイルで、addEventListener メソッドを使用してクリック イベントをリッスンし、 content要素のステータスをCSSのdisplay属性を使用して展開・折りたたみ機能を切り替えます。

const box = document.querySelector('.box');
box.addEventListener('click', () => {
   const content = box.querySelector('.content');
   if(content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
});

上記は 3 つの小さな関数の実装方法です。JavaScript の基本的な構文と関連ライブラリ ファイルの使い方が上手であれば、Web ページで豊かなインタラクティブな効果を実現できます。読者は、フロントエンド開発スキルを向上させるために、これらのメソッドをプロジェクトに適用してみることができます。

以上が[まとめ] JavaScript で実装できる 3 つの興味深い機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。