-3

我正在尝试为我的网站制作菜单动画。我想使用 jQuery MagicLine 导航。看看魔术线演示：http ://css-tricks.com/examples/MagicLine

有两个例子，一个是正常的底部边框，第二个是鼠标悬停时背景不同的不同颜色动画。现在我想要什么？我想使用第一个演示，但我想要不同颜色的底部边框，如第二个演示..

谁可以帮我这个事？

4

2 回答 2

0

您需要rel在每个标签上都有一个属性a，这将是边框颜色：

<ul class="group" id="example-one">
    <li class="current_page_item"><a href="#" rel="#fe4902">Home</a></li>
    <li><a rel="#fe4902" href="#">Home</a></li>
    <li><a rel="#A41322" href="#">Buy Tickets</a></li>
    <li><a rel="#C6AA01" href="#">Group Sales</a></li>
    <li><a rel="#D40229" href="#">The Show</a></li>
    <li><a rel="#98CEAA" href="#">Videos</a></li>
    <li><a rel="#1B9B93" href="#">Photos</a></li>
    <li><a rel="#8DC91E" href="#">Magic Shop</a></li>
</ul>

然后您需要存储原始颜色值。

所以在你得到OrigWidthof之后$magicLine，你需要

    .data("origColor", $('.current_page_item a').attr("rel"));

在悬停功能上，您需要获取rel悬停项目的属性值。

      backgroundColor: $el.attr("rel")

然后在鼠标移出时，您需要将边框设置回原始颜色

        backgroundColor : $magicLine.data("origColor")
于 2013-06-13T11:18:21.707 回答
0

需要做的修改很少。HTML / CSS / jQuery

转到您的 HTML 文件并更新<li>s' 中的所有 a 标签<ul id="example-one">。这些 a 标签应该具有属性“rel”，并且该属性具有底部边框颜色的值。就像演示 2（你可能会看到它在 html 文件中的样子）。

添加“rel”属性后。

<ul class="group" id="example-one">
            <li class="current_page_item">
                <a href="#" rel="#C6AA01">Home</a>
            </li>
            <li><a rel="#fe4902" href="#">Buy Tickets</a></li>
            <li><a rel="#A41322" href="#">Group Sales</a></li>
            <li><a rel="#C6AA01" href="#">Reviews</a></li>
            <li><a rel="#900" href="#">The Show</a></li>
            <li><a rel="#D40229" href="#">Videos</a></li>
            <li><a rel="#1B9B93" href="#">Photos</a></li>
            <li><a rel="#8DC91E" href="#">Magic Shop</a></li>
</ul>

然后转到您的 css 文件并删除背景颜色属性。如果您没有删除此背景颜色，则会出现从“#magic-line”背景颜色到“rel”颜色值的颜色过渡动画。根据您的要求，请确保将其删除。

CSS

#magic-line { 
    position: absolute;
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    //background: #fe4902; - remove this.
}

在您的 jQuery 文件中，请更新此代码：

$magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width())
    // add below code
    .data("origColor", $(".current_page_item a").attr("rel")); 

 $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth,

        // add below code   
        backgroundColor: $el.attr("rel")        
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth"),

            // add below code
            backgroundColor: $magicLine.data("origColor")

        });    
    });

    $(".current_page_item a").mouseenter();
于 2013-06-13T12:33:23.053 回答