0

こんにちは、みなさん。あなたが私を助けてくれることを願っています

このウェブサイトに取り組んでいて、気に入ったホバー効果をすべて完成させました。非常に単純なフェード効果が機能していることがわかります。これは、javascript を使用しない通常の CSS ホバーに劣化します。

私がやろうとしているのは、ロード時とアイドル時に派手なスライドショーが行われているようにページを見せることです.別のスクリプトを使用する代わりに、メインページリンクの既存のホバースタイル/動作を利用してそれを実現したかったのです.ゼロからエフェクトを作成します。

これを行うには、ページがロードされたら、左から右へ (フットケア、芝生と設備、私たちについて、お問い合わせ)、ループする定期的な間隔で各リンクのホバー アクションをエミュレートするスクリプトが必要になると想像しました。 4 つのすべてのリンク (フットケア、芝生と設備、私たちについて、お問い合わせ、フットケア、芝生と設備など) はすべて無期限に表示されますが、視聴者がそれらのいずれかに実際にカーソルを合わせると一時停止し、ユーザーがマウスアウトすると中断したところから再開します。あなたが私のドリフトを理解してくれることを願っています...

また、現在のhtmlを不必要に混乱させることなくこれを達成したいと考えています。だから私は、すべてを可能な限りスクリプトで行う必要があると思います..

私はjavascriptとjqueryが初めてです。s5ent.brinkster.net/beta3.1-autohover.asp でわかるように、私が作成した次のスクリプトは正しく動作しません。それらすべてに同時にホバーし、ホバーアウトしなくなりました。実際に各リンクに出入りしようとすると、リンクが再び表示されます。

<script type="text/javascript">
$(document).ready(function () {
    var speed = 5000;
    var run = setInterval('rotate()', speed);
});
function rotate() {
    $('.lilevel1 a').each(function(i) {
        $(this).mouseover();
    });
}
</script>

それはただひどいです。スクリプトのこの最後のビットが ie.

このことを実現するのを手伝ってくれませんか？それは本当に甘いでしょう、みんな。私はすぐにこれを作り上げることができるトンサの天才がそこにいることを知っています. または、もっと良い方法がある場合は、ぜひ教えてください。

みんなありがとう、みんなが楽しいことを願っています。

4

2 に答える 2

0

私はついにそれを機能させました。コードの効率を改善する方法を提案できる場合は、そうしてください。本当にありがとう。このスクリプトは s5ent.com で動作しています

<script><!--
// globally declare hover picker
var rotateCursor = -1;
var imageCount = 4;

$(document).ready(function () {

    // re-class links
    $('#li1flnk').attr('id', 'li1fa');
    $('#li1tlnk').attr('id', 'li1ta');
    $('#li1alnk').attr('id', 'li1aa');
    $('#li1clnk').attr('id', 'li1ca');

    // add hover class containing hover image to each link
    $('li.lilevel1 a').append('<span class="hover"><\/span>').each(function () {

        // hide hover elements from view
        var $span = $('> span.hover', this).css('display', 'none');

        // on hover span
        $(this).hover(function () {

            // stop current animation
            $('.lilevel1 a .hover').each(function () {
                $(this).stop(false, true).fadeOut('slow');
                $(this).parent().css('background-position', 'left top');
            });
            clearInterval(run);

            // hover proper
            $span.stop(false, true).fadeIn('slow');
        }, function () {

            // off hover proper
            $span.stop(false, true).fadeOut('slow');

            // resume animation
            run = setInterval('rotate()', speed);
        });
    });

    // call first animation
    rotate();

    // start animation after first call
    var speed = 4000;
    var run = setInterval('rotate()', speed);
});

function rotate() {

    //initialize cursor
    rotateCursor++;
    if (rotateCursor >= imageCount) rotateCursor = 0;

    // on hover effect
    $('.lilevel1 a .hover').eq(rotateCursor).fadeIn(500);
    $('.lilevel1 a').eq(rotateCursor).css('background-position', 'left 22px');

    // off hover effect
    setTimeout("$('.lilevel1 a .hover').eq(rotateCursor).fadeOut(500)", 3000);
    setTimeout("$('.lilevel1 a').eq(rotateCursor).css('background-position','left top')", 3000);
}

//--></script>
于 2010-03-27T09:57:15.567 に答える
0

手動でトリガーしてホバー状態をエミュレートしようとはしませんmouseover。スクリプトでホバーを発生させる代わりに、ホバーと同じことをスクリプトで実行するようにしてください。

ホバー機能については、すでに次のものがあります。

$(this).hover(function(){ ... });

代わりに、次のように無名関数を取り出します。

function onImageHover(link) { ... }
$(this).hover(function() { onImageCursor($(this)); });

次に、回転スクリプトで同じ効果を呼び出すこともできます。onImageHover上記の 2 行目は$(this).hover(onImageCursor)そのままでもかまいませんが、オブジェクトを参照として渡しているのでapply、rotate.

それ以外; 現在のスクリプトでは、 が呼び出されるたびに、すべてのリンクrotateに対して同じコードが実行されます。以下を表示したいだけなので、ある種のカーソルを使用して、ローテーションのどこにいるかを追跡する必要があります。 lilevel1

var rotateCursor = -1;
var imageCount = 4;
function rotate() {
    rotateCursor++;
    if(rotateCursor >= imageCount) rotateCursor = 0;

    onImageHover( $('.lilevel1 a').eq(rotateCursor) );
}
于 2010-03-25T17:56:33.467 に答える