-1

さて、私はメニューに 5 つの要素を持っています。この下の小さな線には、ホバリングしている要素に応じて移動する画像があります。デフォルトでは、現在の Web サイトの下にあるため、5 つの要素のいずれからでも開始できます。

何かにカーソルを合わせるとその場所に移動し、メニューにカーソルを合わせるのをやめると、現在の状態に戻ります。ただし、現在の要素の前に他の要素をホバーすると、そのポイントに直接移動します。

すべてのメニューには、ID の先頭の同じ部分 (#fxmenu_1 など) があります。1 から 5 までは、id の数だけを取得し、5 つの jquery を書き込まないようにする方が速いと思います。

少し試してみましたが、jquery に問題があります。

$(document).ready(function(){
var id;
    $('#fxmenu_'+id+':not(.totalactive)').hover(function (){
        $('#img').animate({"marginTop": "-70px"},1000, function(){
            $('#img').animate({"marginLeft":+(180*id)+"px"},1000, function(){
                $('#img').animate({"marginTop": "-90px"},1000);
                });
        });
    });
});

ここで私の例を見ることができます: http://jsfiddle.net/rzJMv/1/

これは別の試みです

$(document).ready(function(){
var id,
    hovermenu = $('#fxmenu_'+id);
    $(hovermenu).hover(function (){
        $('#img').animate({marginTop: "-70px"},1000, function(){
            $('#img').animate({marginLeft:+(180*id)+"px"},1000, function(){
                $('#img').animate({marginTop: "-90px"},1000);
            });
        });
    }, function() {
        $('#img').removeAttr('style');

    });
});
4

1 に答える 1

0

この JavaScript プラグインの使用を提案してもよろしいですか?
http://www.scriptiny.com/2008/05/sliding-javascript-menu-highlight-1kb/

再作成しようとしている機能があります。なぜホイールを再現しようとするのですか？

編集 1

とにかく、あなたのコードでこれをやりたいのなら、ここに作り直しがあります。

HTML

<div id="pmenu">
    <ul id="bmenul">
        <li><a class="brand" id="fxmenu1_" href="/">LOGO</a> </li>
        <li class="active"><a id="fxmenu_2"  href="/team" title="team">The team</a> </li>
        <li><a id="fxmenu_3" href="/services" title="Servicios">Services</a> </li>
        <li><a id="fxmenu_4" href="/projects" title="Proyectos">Projects</a> </li>
        <li><a id="fxmenu_5" href="/contact" title="Contacto">Contact</a> </li>
    </ul>
    <div id="bar">
        <div id="img"></div>
    </div>
</div>

Javascript 

$(document).ready(function() {
    var activeIndex = $('#bmenul > li.active').index();

    $('#img').css({
        'marginLeft': (180 * activeIndex) + 'px'
    }).show();

    $('#bmenul > li').not('.active').hover(function() {
        var index = $(this).index();
        $('#img').stop().animate({
            'marginLeft': (180 * index) + 'px'
        }, 400);
    }, function() {
        $('#img').stop().animate({
            'marginLeft': (180 * activeIndex) + 'px'
        }, 400);
    });
});​

CSS

...
#img {
    max-height: 180px;
    width: 180px;
    border-bottom: 2px solid #000000;
    display: none;
}

デモ

于 2012-12-03T04:08:03.547 に答える