0

我正在尝试在我的菜单中添加 lavalamp 效果。而且我阅读了 lavalamp 文档，并且我的效果已经生效。但我想要在我的菜单中使用背景颜色，我想要一个三角形（如上图）跟随鼠标的菜单。菜单上方的白色三角形 这是我想要做的事情：http: //jsfiddle.net/ritz/6CWc5/ 但我不能做三角形，我不明白为什么。你能给我一点帮助吗？

我的代码：

HTML：

   <html>
    <head>
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.9.1'></script>
    <script type="text/javascript" src="lavalamp-0.2.0/jquery.easing.min.js"></script>
    <script type="text/javascript" src="lavalamp-0.2.0/jquery.lavalamp.min.js"></script>
    </head>

<body>

<div id="wrapper">
    <div id="navbar">
            <div id="lavaWrapper">
                <ul class="lavaLamp">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Product</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
    </div>
</div>
</body>
</html

jQuery：

 <script type="text/javascript">
            $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
  </script>

CSS：

    <style>

    *{margin:0; padding:0;}
    #wrapper{width:auto; height:auto;}
    #navbar{background:#9F0; height:51px; margin:0 auto; padding:0;} 
    #lavaWrapper{margin:0 auto; width:700px;}   

    /* Styles for the entire LavaLamp menu */        
    .lavaLamp {
        position: relative;
        height: 29px; width: 421px;
        background: url("../image/bg.gif") no-repeat top;
        padding: 15px; margin: 10px 0;
        overflow: hidden;
    }
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;                    
    }

    /* Represents the background of the highlighted menu-item. */

    .lavaLamp li.back {
      background:red;
      width: 9px; height: 30px;
      z-index: 8;
      position: absolute;
    }

    /* Styles for each menu-item. */    
    .lavaLamp li a {
        position: relative; overflow: hidden;
        text-decoration: none; 
        text-transform: uppercase;
        font: bold 14px arial;
        color: #fff; outline: none;
        text-align: center;
        height: 30px; top: 7px; 
        z-index: 10; letter-spacing: 0; 
        float: left; display: block;
        margin: auto 10px;    
            }
    </style>
4

1 回答 1

1

好的，所以我煮了这个。

小提琴

$('.lavaLamp li').hover(

function () {
    var offset = $(this).offset(),
        width = $(this).width(),
        lavapos = offset.left + (width / 2);
    $('.lava').css({
        left: lavapos
    });
},

function () {
    var offset = $('.lavaLamp li.active').offset(),
        width = $('.lavaLamp li.active').width(),
        lavapos = offset.left + (width / 2);
    $('.lava').css({
        left: lavapos
    });
});

$('.lavaLamp li').click(function () {
    $('.lavaLamp li').removeClass('active');
    $(this).addClass('active');
});

.lava {
    position:absolute;
    bottom:8px;
    height:0;
    width:0;
    left:38px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #fff;
    float:none;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.5s ease-in-out;
}

<ul class="lavaLamp">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Product</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                    <li class="lava"></li>
                </ul>
于 2014-03-03T21:52:52.413 回答