Jquery 尝试创建不使用时隐藏在左侧的滚动水平缩略图导航

我正在尝试重新创建以下类型的滚动缩略图导航，如以下教程中所述：

我需要我的大拇指从左侧水平滑出。我已尽我所能修改了代码，但无法使其正常工作。（认为问题在jquery的前三分之一）

以下是我迄今为止的情况：

HTML

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);
      }
  );
  });

$（函数（）{
//功能使拇指菜单可滚动
函数buildThumbs（$elem）{
var$wrapper=$elem.next（）；
var$menu=$wrapper.find（'.sc_menu'）；
var不活跃保证金=220；
//将滚动条向下移动到菜单（移动至菜单的高度）
$wrapper.scrollRight（$menu.outerHeight（））；
//上下移动鼠标时，包装器上下移动（滚动）
$wrapper.bind（'mousemove'，函数（e）{
var wrapperWidth=$wrapper.width（）；
var menuWidth=$menu.outerWidth（）+2*不活动边距；
var top=（e.pageX-$wrapper.offset（）.right）*（menuWidth-wrapperWidth）/wrapperWidth-inactiveMargin；
$wrapper.scrollRight（右+10）；
});
}
var-stacktime；
$（'#menu li>a'）.bind（'mouseover'，function（）{
var$this=$（this）；
buildThumbs（$this）；
var pos=$this.next（）.find（'a'）.size（）；
var f=函数（）{
如果（pos==0）clearTimeout（stacktime）；
$this.next（）.find（'a:nth child（'+pos+'））.css（'visibility'，'visible'）；
--pos；
};
//每个拇指都会延迟出现
堆栈时间=设置间隔（f，50）；
});
///在整个
的mouseleave上，可滚动区域被隐藏
$（'#menu li'）.bind（'mouseleave'，function（）{
var$this=$（this）；
clearTimeout（堆栈时间）；
$this.find（'.sc_menu'）.css（'visibility'，'hidden'）.find（'a'）.css（'visibility'，'hidden'）；
$this.find（'.sc_menu_wrapper'）.css（'visibility'，'hidden'）；
});
//悬停拇指时，更改其不透明度
$（'.sc_菜单a'）。悬停(
函数（）{
var$this=$（this）；
$this.find（'img'））
.停止
.animate（{'opacity'：'1.0'}，400）；
},
函数（）{
var$this=$（this）；
$this.find（'img'））
.停止
.animate（{'opacity'：'0.3'}，400）；
}
);
});

想知道是否有鹰眼可以指出我的错误。由于我对JQuery的了解有限，我猜它就在那里

我真的很感激有人抽出时间来检查这件事

谢谢大家!

我为你发了一封邮件：）

我无法让您的代码与演示一起使用，但首先需要更改的是所有左边的右键。没有“向右滚动”这样的东西。这只是代码中修复了这些问题的第一个函数

  // 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);
}

---

更新以使滚动和突出显示正常工作-这可能不是最有效的方法，但我没有改变原来的代码太多

CSS

剧本

$(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);
 });
});

---

哦，我的天啊，非常非常感谢你花时间帮我解决这个问题。（我不敢相信这个社区的人们如此慷慨）。今晚我将在我的网站上工作，如果/当我运行它时，我会回来给你应得的荣誉（勾选并向上箭头）。而且这个jsfiddle站点看起来很棒。非常感谢你分享这个链接。显然，我必须调查这一资源。我可以吻你湿漉漉的小鼻子，福吉：）再次谢谢你。嗨，福吉，我试过了，效果很好。。。从右边出来，向左边打开。我知道您已经在这方面做了大量的工作-如果您能提供一些建议，说明我应该使用哪个JQuery CSS定位选择器，以使其从左侧向右侧打开（希望这有意义？）-这是本项目所需要的。是$（选择器）.offset（）吗？我以前从未使用过这些选择器。不管怎样，我会一直插在这里，如果我成功的话，我会发布我的结果。嗨，我让图像从左边弹出，但后来我意识到它不会像教程上下滚动那样左右滚动。。。再给我一点时间，我会更新上面的帖子：）好的，我已经更新了演示（），我希望这就是你想要的！：）你做到了！真不敢相信！我一直工作到凌晨，没能弄明白。（在此之前，我已经挣扎了将近一周）。但看起来你也花了好几个小时来研究这个问题（但有结果！）。我该怎么感谢你呢？我将仔细分析你的代码，找出你是如何让它工作的。这已经教会了我很多。对于你们为我找到这个解决方案所付出的努力和努力，我感到无比感激和谦卑。你让我高兴极了！我的月份！我再次衷心感谢你，福吉。我希望能及时付清这笔钱。

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

/* 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);
 });
});