ホームページ > 記事 > ウェブフロントエンド > tween.js を使用してナビゲーション バーを実装する方法 slide_html/css_WEB-ITnose
tween.js を使用してナビゲーション バーを実装する方法 slide_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:49:531644ブラウズ
ナビゲーション バーはほとんどの 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) をクリアします。動的効果は次のとおりです。