试图创建滚动水平缩略图导航是在左边在不使用时

Question

我想在下面的教程中所描述重新创建以下类型的滚动缩略图导航的隐藏：

http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/

我需要我的拇指从左侧水平滑出。我已经尽最大努力修改了代码，但我无法实现它的功能。 （认为​​问题出现在jQuery的前三分之一）。

这是我要约会：

HTML

<ul class="menu" id="menu"> 
    <li> 
     <a href="#"></a> 
     <div class="sc_menu_wrapper"> 
      <div class="sc_menu"> 
       <a href="#"><img src="images/gallery/1.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/2.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/3.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/4.jpg" alt=""/></a> 
       <a href="#"><img src="images/gallery/5.jpg" alt=""/></a> 
      </div> 
     </div> 
    </li> 
    </ul> 

CSS

/* Navigation Style */ 
ul.menu{ 
position: fixed; 
top: 0px; 
left:0px; 
width: 100%; 
} 

ul.menu li{ 
position:relative; 
width: 100% 
} 

ul.menu li > a{ 
position:absolute; 
top:300px; 
left:0px; 
width:40px; 
height:200px; 
background-color:#e7e7e8; 
} 

/* Thumb Scrolling Style */ 

div.sc_menu_wrapper { 
position: absolute; 
right: 0px; 
height: 220px; 
overflow: hidden; 
top: 300px; 
left:0px; 
visibility:hidden; 
} 

div.sc_menu { 
height: 200px; 
visibility:hidden; 
} 

.sc_menu a { 
display: block; 
background-color:#e7e7e8; 
} 
.sc_menu img { 
display: block; 
border: none; 
opacity:0.3; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
} 

JQUERY

$(function(){ 

     // function to make the thumbs menu scrollable 
      function buildThumbs($elem){ 
       var $wrapper  = $elem.next(); 
       var $menu  = $wrapper.find('.sc_menu'); 
       var inactiveMargin = 220; 

       // move the scroll down to the beggining (move as much as the height of the menu) 

       $wrapper.scrollRight($menu.outerHeight()); 

       //when moving the mouse up or down, the wrapper moves (scrolls) up or down 

       $wrapper.bind('mousemove',function(e){ 

        var wrapperWidth = $wrapper.width(); 
        var menuWidth = $menu.outerWidth() + 2 * inactiveMargin; 
        var top  = (e.pageX - $wrapper.offset().right) * (menuWidth - wrapperWidth)/wrapperWidth - inactiveMargin; 

        $wrapper.scrollRight(right+10); 
       }); 
      } 

     var stacktime; 

     $('#menu li > a').bind('mouseover',function() { 
      var $this = $(this); 

      buildThumbs($this); 

      var pos = $this.next().find('a').size(); 
      var f = function(){ 
       if(pos==0) clearTimeout(stacktime); 
       $this.next().find('a:nth-child('+pos+')').css('visibility','visible'); 
       --pos; 
      }; 

      // each thumb will appear with a delay 
      stacktime = setInterval(f , 50); 
     }); 


     /// on mouseleave of the whole <li> the scrollable area is hidden 
     $('#menu li').bind('mouseleave',function() { 
      var $this = $(this); 
      clearTimeout(stacktime); 
      $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden'); 
      $this.find('.sc_menu_wrapper').css('visibility','hidden'); 
     }); 

     // when hovering a thumb, change its opacity 
     $('.sc_menu a').hover(
     function() { 
      var $this = $(this); 
      $this.find('img') 
      .stop() 
      .animate({'opacity':'1.0'},400); 
     }, 
     function() { 
      var $this = $(this); 
      $this.find('img') 
      .stop() 
      .animate({'opacity':'0.3'},400); 
     } 
); 
    }); 

想知道一些鹰眼也许能够指出我在哪里我错了。由于我对JQuery的知识是有限的，我猜它在那里。

我真的很感谢任何花时间看这个的人。

谢谢！

Answer 1

我发布了demo你:)

我不能让你的代码演示的，但需要改变的第一件事是工作到左的一切权利。没有这样的东西，如scrollRight。这是代码中的第一个功能，修复了这些问题。

// function to make the thumbs menu scrollable 
     function buildThumbs($elem){ 
      var $wrapper  = $elem.next(); 
      var $menu   = $wrapper.find('.sc_menu'); 
      var inactiveMargin = 220; 

      // move the scroll down to the beggining (move as much as the height of the menu) 

      $wrapper.scrollLeft($menu.outerHeight()); 

      //when moving the mouse up or down, the wrapper moves (scrolls) up or down 

      $wrapper.bind('mousemove',function(e){ 

       var wrapperWidth = $wrapper.width(); 
       var menuWidth = $menu.outerWidth() + 2 * inactiveMargin; 
       var left   = (e.pageX - $wrapper.offset().left) * (menuWidth - wrapperWidth)/wrapperWidth - inactiveMargin; 

       $wrapper.scrollLeft(left+10); 
      }); 
     } 

哦，在这一点CSS的添加float:left：

.sc_menu img { 
display: block; 
border: none; 
float: left; 
opacity:0.3; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
} 

---

更新，使滚动和亮点正常工作 - 它可能不这样做的最有效的方法，但我没有更改原来的代码。 Updated demo here。

CSS

/* Navigation Style */ 
ul.menu{ 
position: fixed; 
top: 0px; 
left:0px; 
width: 100%; 
} 

ul.menu li{ 
position:relative; 
width: 100% 
} 

ul.menu li > a { 
display: block; 
position:absolute; 
top:300px; 
left:0px; 
width:40px; 
height:200px; 
background-color:#e7e7e8; 
} 

/* Thumb Scrolling Style */ 

div.sc_menu_wrapper { 
position: relative; 
height: 220px; 
overflow: hidden; 
top: 300px; 
left: 0px; 
visibility:hidden; 
} 

div.sc_menu { 
height: 195px; 
visibility:hidden; 
overflow: hidden; 
position: absolute; 
top: 0; 
left: 0; 
display: block; 
top: 0; 
left: 0; 
width: 100%; 
} 

.sc_menu a { 
background-color:#e7e7e8; 
} 
.sc_menu img { 
height: 195px; 
width: 130px; 
float: left; 
display: block; 
border: none; 
opacity:0.3; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
} 

脚本

$(function(){ 
// function to make the thumbs menu scrollable 
function buildThumbs($elem) { 
    var $wrapper = $elem.next(); 
    var $menu = $wrapper.find('.sc_menu'); 
    var leftOffset = $wrapper.offset().left; 

    // move the scroll left to the beggining 
    $wrapper.scrollLeft(0); 
    // make menuWidth (width of all images side by side) include the offset 
    var menuWidth = leftOffset; 
    // calculate the width of the menu by adding each image width (includes any padding, border & margin) 
    $menu.find('img').each(function(){ 
    $(this).css('left', menuWidth); 
    menuWidth += $(this).outerWidth(true); 
    }); 
    // set calculated menu width - if not done, the images will wrap to the next line 
    $menu.width(menuWidth); 

    //when moving the mouse left or right, the wrapper moves (scrolls) left or right 
    $wrapper.bind('mousemove', function(e){ 
    var wrapperWidth = $wrapper.outerWidth(true); 
    var left = (e.pageX - leftOffset) * (menuWidth - wrapperWidth)/wrapperWidth; 
    $wrapper.scrollLeft(left); 
    }); 
} 

var stacktime; 
$('#menu li > a').bind('mouseover', function(){ 
    var $this = $(this); 
    // set up thumbnail scrolling 
    buildThumbs($this); 
    var pos = 0, 
     len = $this.next().find('a').length; 
    var f = function() { 
    if (pos > len) { clearTimeout(stacktime); } 
    $this.next().find('a:nth-child(' + pos + ')').css('visibility', 'visible'); 
    pos++; 
    }; 
    // each thumb will appear with a delay 
    stacktime = setInterval(f, 50); 
}); 

// on mouseleave, the whole the scrollable area is hidden 
$('#menu li').bind('mouseleave', function(){ 
    var $this = $(this); 
    clearTimeout(stacktime); 
    $this.find('.sc_menu').css('visibility', 'hidden').find('a').css('visibility', 'hidden'); 
    $this.find('.sc_menu_wrapper').css('visibility', 'hidden'); 
}); 

// when hovering a thumb, change its opacity 
$('.sc_menu a').hover(function(){ 
    $(this).find('img').stop().animate({ 'opacity': '1.0' }, 400); 
}, function() { 
    $(this).find('img').stop().animate({ 'opacity': '0.3' }, 400); 
}); 
});