0

嘿大家。希望你能帮助我

我在这个网站上工作，我已经完成了我喜欢的所有悬停效果 - 它们正是我想要的样子：http: //s5ent.brinkster.net/beta3.asp - 尝试将鼠标悬停在四个链接上，你'会在工作中看到一个非常简单的淡入淡出效果，它会退化为没有 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

我不会尝试通过手动触发来模拟悬停状态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 回答
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 回答