Я использую Lavalamp, но я пытаюсь использовать треугольник вместо фона, но он не работает

Question

Я использую Lavalamp, но я пытаюсь использовать треугольник вместо фона, но он не работает

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>

andyB 03 март 2014, в 22:40

Источник

Теги:

jquery

html

css

lavalamp

1 ответ

Ещё вопросы

Lokesh Suthar · Accepted Answer · 2014-03-03T19-49-00.000Z

Хорошо, поэтому я приготовил это.

FIDDLE

$('.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>

Спасибо, это сработало! Но это кажется немного сложным, и я новичок в jQuery, и у меня возникли некоторые трудности с пониманием вашего кода. Это невозможно с помощью кода, который я здесь " jsfiddle.net/ritz/6CWc5/3 " изменить с помощью ".lavaLamp li.back"? Потому что теперь я пытаюсь вместо треугольника сделать кружок под пунктом меню. Я могу изменить высоту, но ширина подстраивается под количество символов в пункте меню. Невозможно изменить ширину и расположить круг в центре с помощью этого базового сценария jquery, который я публикую в скрипке? Спасибо и извините за беспокойство!