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

HTML5 部分

tween.js とは何ですか?

CSS3 スタイル部分

js部分

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 21, 2016 am 08:49 AM

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

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

HTML5 部分

tween.js とは何ですか?

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

&lt;body&gt;        &lt;!--div.wrap&gt;div{按钮$}*4--&gt;        &lt;div class=&quot;wrap&quot;&gt;            &lt;div class=&quot;middle&quot;&gt;                &lt;div&gt;按钮1&lt;/div&gt;                &lt;div&gt;按钮2&lt;/div&gt;                &lt;div&gt;按钮3&lt;/div&gt;                &lt;div&gt;按钮4&lt;/div&gt;            &lt;/div&gt;        &lt;/div&gt;        &lt;div class=&quot;slider&quot;&gt;&lt;/div&gt;    &lt;/body&gt;

ログイン後にコピー

CSS3 スタイル部分

&lt;style type=&quot;text/css&quot;&gt;            .wrap{                width: 400px;                height: 100px;                background-color: gray;            }            .middle{                width: 100%;                height: 80px;                background-color: greenyellow;            }            .middle&gt;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;            }        &lt;/style&gt;

ログイン後にコピー

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

Static.PNG

js部分

解析ロジック

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

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

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

File.png

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

&lt;script src=&quot;js/tween.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;    &lt;script type=&quot;text/javascript&quot;&gt;        var divs=document.querySelectorAll(&quot;.middle&gt;div&quot;);        var slider=document.querySelector(&quot;.slider&quot;);        var timer = null;

ログイン後にコピー

操作

        for(var i=0;i&lt;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 &gt;= d) {                        clearInterval(timer);                    }                    //结构:Tween动画库.Back动画类型.easeOut缓冲类型                    slider.style.left = Tween.Back.easeOut(t, start, change, d) + &quot;px&quot;;                }, 30);            }        }    &lt;/script&gt;

ログイン後にコピー

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

*{     margin:0;    padding:0}

ログイン後にコピー

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

このウェブサイトの声明

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