1

我正在为导航栏使用带有 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);
4

1 回答 1

0

尝试将调用包装spasticNav()在 jqueryajaxComplete回调中：

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

# On each slide
$(document).ajaxComplete(function() {
  $('.lava').spasticNav();
});
于 2013-06-15T16:27:38.007 回答