tween.js を使用してナビゲーションバーを実装する方法 slide_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

tween.js を使用してナビゲーションバーを実装する方法 slide_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:49 AM

ナビゲーションバーはほとんどの Web サイトで使用されています。今日は Tween.js を使用して、以下の動的な効果を備えたナビゲーションバーを作成します。

画像はインターネットから取得しました。jpg

HTML5 部分

tween.js とは何ですか?

tween.js は、滑らかなアニメーション効果を生成できる JS アニメーションライブラリです。 tween.js を使用すると、要素の属性値をスムーズに変更できます。設定により CSS3 風のさまざまなアニメーション効果を生成できます。

<body>        <!--div.wrap>div{按钮$}*4-->        <div class="wrap">            <div class="middle">                <div>按钮1</div>                <div>按钮2</div>                <div>按钮3</div>                <div>按钮4</div>            </div>        </div>        <div class="slider"></div>    </body>

CSS3 スタイル部分

<style type="text/css">            .wrap{                width: 400px;                height: 100px;                background-color: gray;            }            .middle{                width: 100%;                height: 80px;                background-color: greenyellow;            }            .middle>div{                width: 100px;                height: 100%;                text-align: center;                font-size: 20px;                line-height: 80px;                float: left;            }            .slider{                width: 100px;                height: 10px;                border-radius: 5px;                background-color: brown;                position: absolute;            }        </style>

上記の部分では、スライダーの絶対位置を除いて特別に注意する必要はありません。

Static.PNG

js部分

解析ロジック

1. マウスがナビゲーションバーの外にある場合、下のカラーバースライダが開始位置 2 にあります。スライダは、対応する位置までマウスをスライドさせます

tween.js エフェクトの説明 - インターネットから

まず tween.js を導入し、次に変数 tween.js のダウンロードリンクを定義します http://www .cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html

File.png

別フォルダに配置した場合は相対ファイルから参照クリップ

<script src="js/tween.js" type="text/javascript"></script>    <script type="text/javascript">        var divs=document.querySelectorAll(".middle>div");        var slider=document.querySelector(".slider");        var timer = null;

操作

        for(var i=0;i<divs.length;i++){            divs[i].index=i;             divs[i].onmouseover=function(){                var start = slider.offsetLeft                //多加的8是网页自带的边框                var end = this.index*100+8;                var change = end-start;                var t=0;                //duration循环次数                var d=20;                //防止定时器混乱,每次用前清一下                clearInterval(timer);                timer = setInterval(function () {                    t++;                    if (t >= d) {                        clearInterval(timer);                    }                    //结构:Tween动画库.Back动画类型.easeOut缓冲类型                    slider.style.left = Tween.Back.easeOut(t, start, change, d) + "px";                }, 30);            }        }    </script>

ここ説明 1.var end = this.index*100 +8; 8 はブラウザ独自のスタイルです。

*{     margin:0;    padding:0}

を使用する場合、その他の同様の明確なブラウザスタイルコードでは 8 を追加する必要はありません。 (3 つのバッファタイプ、10 のアニメーションタイプ、詳細なスタイルについては、上記の効果の説明を参照してください) ); 3.t 開始時間; d 開始位置の変更; 各クリックの影響を防ぐため。相互に影響を及ぼさないように、各呼び出しの前にタイマー clearInterval(timer) をクリアします。動的効果は次のとおりです。

声明

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

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles