<img src="http://files.jb51.net/file_images/article/201305/201352161501921.gif?201342161524" alt="jQuery のエラスティック スライド ナビゲーション メニューの実装アイデアと code_jquery" ><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="44625" class="copybut" id="copybut44625" onclick="doCopy('code44625')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code44625"> <br><!-- これこの記事は著者のアイデアを参照しています: http://runjs.cn/code/ouvvjqka、jquery コードは別に記述されています --> <br><!-- この記事は http://blog.csdn からのものです。 .net/liuyanzhi08 --> ; <BR><!-- 実装のアイデア: <BR>CSS: アニメーション化されたスライダーとして絶対位置の div を使用し、その左属性を変更してアニメーション効果を表示します <BR>javascript: hover () ナビゲーションへのマウスの移動をトリガーします。 ナビゲーションのアクションと、ナビゲーション ナビゲーションから移動する (つまり、現在のナビゲーションに戻る) アクション <BR>--> <BR><!DOCTYPE HTML> <br><html> <br> <meta charset="UTF-8" /> <br><meta name="author" content="Nancle" /> 🎜><title>jQuery エラスティック スライド ナビゲーション メニュー</title> <br><style type="text/css"> <br>body{ font-family:"Microsoft YaHei";} <br>#nav_wrapper { 位置:相対; 幅: 835px; マージン: 80px 自動; 境界線: 2px #ddd ソリッド;} <br>#nav_wrapper #nav_menu{ 高さ:50px;} <br>#nav_wrapper #nav_menu{ 表示:ブロック;フロート:左; 高さ:0 40ピクセル; フォントサイズ:16ピクセル; } <br>#nav_animate_block{ 位置:絶対; :-2px; 高さ:2px; 背景:#80b600 ;} <br></style> <br><script type="text/javascript" src="http://ajax.googleapis. com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <br><script type="text/javascript"> <br>$(function(){ <br>var $current_nav = $("#current_nav"); // 現在の要素 (現在のナビゲーション項目) <br>var current_nav_width = $current_nav.innerWidth(); <br>var current_nav_left = $current_nav.position().left ; <br>var $nav_animate_block = $("#nav_animate_block") //アニメーション化されたスライダー<br>$nav_animate_block.css({ width:current_nav_width, left:current_nav_left });現在の要素にあります<br>//マウスが要素に入るとアニメーションがトリガーされます Event<br>$("#nav_menu a").hover(function(){ <br>varindex = $(this) .index(); <br>var $a_cur = $("#nav_menu").find ("a").eq(index);//マウスが移動する要素<br>//トリガーされた要素を使用します左の位置と幅を取得する要素のインデックス<br>var width = $a_cur.innerWidth() ; <br>var left = $a_cur.position().left; <br>//アニメーション化されたスライダーの位置を設定します<br>$nav_animate_block.stop().animate({ <br>width: width, <br>left : left <br>}, 300) <br>}, function(){ <br>//マウスが離れるときa 要素、アニメーション化されたスライダーは現在の要素の位置に戻ります <br>$nav_animate_block.stop().animate({ <br>width: current_nav_width, <br>left: current_nav_left <br>}) <br>}) <br>}); <br></head> <br><div id="nav_wrapper"> nav_menu"> <br><a href="#" id="current_nav">ホームページ</a> ; <BR><a href="#">商品リスト</a> <br>< ;a href="#">顧客事例</a> <br><a href="#">サービス プラットフォーム</a> <br><a href="#">コミュニケーション フォーラム< /a><br><a href="#">会社概要</a><br><div id="nav_animate_block"></div> ></div> <br></body> <br><br> </div>
