Question

我正在使用带有lavalamp功能（spasticNav）的全屏滑动网站（fss滑块）作为导航栏。在每张幻灯片中，我放置了相同的菜单，并为该页面li项目添加了一类“当前”。但是，lavalamp的javascript仅适用于第一张幻灯片。不可否认，我是javascript的初学者。我已经研究并尝试了50种不同的方法来解决这个问题，但无法让它正常工作。

我认为解决这个问题的可能途径是 1.滑块外只有一个菜单。但是，当我尝试这个时，幻灯片的链接不起作用。要么 2.更改活动类和绑定。我对此的尝试导致lavalamp变得疯狂，将所有li项目视为活动状态要么 3.使用回调

任何想法或帮助都会非常感激！谢谢

这是基本的HTML

<script type="text/javascript" src="js/jquery.fss-1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script> 
<script type="text/javascript">
        $(function() {
            $(".slider").fss();
            $('.lava').spasticNav();
        });
</script></head>

<body>    
<!-- Slider starts -->
<div class="slider">
<div class="slides">
<!--Page 1 -->
<div id="one" class="slide">
<div class="inner-wrapper">
<div class="header" id="containerb">            
<ul class="top-menu lava">
<li class="selected"><a href="#one" class="special-anchor">One</a></li>
 <li><a href="#two" class="special-anchor">Two</a></li>
 <li><a href="#three" class="special-anchor">Three</a></li>
 <li><a href="#four" class="special-anchor">Four</a></li>
 <li><a href="#five" class="special-anchor">Five</a></li>
</ul>           
</div> 

<section id="content" class="container clearfix">
<p>some content</p> 
</section>

</div>
</div>                

<!-- Page 2 -->                
<div id="two" class="slide">
<div class="inner-wrapper">
<div class="header" id="containerb">              
<ul class="top-menu lava">
<li><a href="#one" class="special-anchor">One</a></li>
 <li><a href="#two" class="special-anchor">Two</a></li>
 <li><a href="#three" class="special-anchor">Three</a></li>
 <li><a href="#four" class="special-anchor">Four</a></li>
 <li><a href="#five" class="special-anchor">Five</a></li>
</ul>           
</div> 

<section id="content" class="container clearfix">
<p>some content</p>
</section>

</div>
</div>

<!-- Page 3 -->              
<div id="three" class="slide">
<div class="inner-wrapper">
<div class="header" id="containerb">                                
<ul class="top-menu lava">
<li><a href="#one" class="special-anchor">One</a></li>
 <li><a href="#two" class="special-anchor">Two</a></li>
 <li><a href="#three" class="special-anchor">Three</a></li>
 <li><a href="#four" class="special-anchor">Four</a></li>
 <li><a href="#five" class="special-anchor">Five</a></li>
</ul>                          
</div> 

<section id="content" class="container clearfix">
<p>some content</p>
</section>

</div>
</div>

......第4和第5页

lavalamp功能的javascript是

(function($) {
  $.fn.spasticNav = function(options) {  
    options = $.extend({  
      overlap : 8,  
      speed : 500,  
      reset : 1500,  
      color : '#007194',  
      easing : 'easeOutExpo'  
    }, options);    

    return this.each(function() {
      var lava = $(this),  
      currentPageItem = $('.selected', lava),  
      blob,  //blob is the box hovering over the selected li
      reset;

      $('<li class="blob"></li>').css({  
        width : currentPageItem.outerWidth(),  
        height : currentPageItem.outerHeight() + options.overlap,  
        left : currentPageItem.position().left,  
        top : currentPageItem.position().top - options.overlap / 2,  
        backgroundColor : options.color  
      }).appendTo('.lava'); 

      blob = $('.blob', lava);

      $('li', lava).hover(function() {    
        clearTimeout(reset);  
        blob.animate({  
          left : $(this).position().left,  
          width : $(this).width()  
        }, {  
          duration : options.speed,  
          easing : options.easing,  
          queue : false  
        });  
      }, function() {  
        // mouse out
        blob.stop().animate ({
          left : $(this).position().left,
          width : $(this).width
        }, options.speed);

        reset = setTimeout(function() {  
          blob.animate({  
            width : currentPageItem.outerWidth(),  
            left : currentPageItem.position().left  
          }, options.speed)  
        }, options.reset);  
      });
    });
  }; 
})(jQuery);

Answer 1

尝试在jquery spasticNav()回调中将调用包装到ajaxComplete：

# First time
$('.lava').spasticNav();

# On each slide
$(document).ajaxComplete(function() {
  $('.lava').spasticNav();
});

全屏滑动网站，Lavalamp不起作用

1 个答案: