Прокрутка div "влево и вправо" и "вверх и вниз" с помощью jQuery

Question

Я работаю над www.alwaystwisted.com . На странице есть 4 элемента div, которые прокручиваются по основным ссылкам вниз или вверх в зависимости от того, на каком элементе вы находитесь.

Мне нужно, чтобы это работало внутри div, но влево или вправо, в зависимости от того, на каком div вы находитесь Я не могу решить это, и это жарит мой мозг.

<script type="text/javascript">
$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
        if ( (filterPath(location.pathname) == filterPath(this.pathname))
        && (location.hostname == this.hostname)
        && (this.hash.replace(/#/,'')) ) {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
             if ($target) {
             var divOffset = $target.parent().offset().top;
             var pOffset = $target.offset().top;
             var pScroll = pOffset - divOffset;
             $(this).click(function() {
                 $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
                 return false;
             });
            }
        }
  });
});
</script>

Я с нетерпением жду полезного ответа. Заранее спасибо, Стю.

Answer 1

Примечание. Я не проверял ваш код на точность и не проверял, сработают ли мои изменения. Я просто взял код, который вы имели, и изменил «top» на «left» и в основном надеялся на лучшее:)

После некоторого переформатирования вашего кода:

$(document).ready(function() { 
    function filterPath(string) 
    { 
        return string.replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,''); 
    } 
    $('a[href*=#]').each(function() { 
        if ( (filterPath(location.pathname) == filterPath(this.pathname)) 
            && (location.hostname == this.hostname) 
            && (this.hash.replace(/#/,'')) ) 
            { 
                var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); 
                var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
                if ($target) 
                { 
                    var divOffset = $target.parent().offset().top; 
                    var pOffset = $target.offset().top; 
                    var pScroll = pOffset - divOffset; 
                    $(this).click(function() 
                    { 
                        $target.parent().animate({scrollTop: pScroll + 'px'}, 600); 
                        return false;
                    });
                } 
            } 
    }); 
}); 

Я думаю, что да, на самом деле, вы, возможно, могли бы повторно использовать этот код, чтобы заставить div перемещаться влево и вправо, изменяя строки:

var divOffset = $target.parent().offset().top; 
var pOffset = $target.offset().top; 
$target.parent().animate({scrollTop: pScroll + 'px'}, 600); 

На что-то вроде:

var divOffset = $target.parent().offset().left; 
var pOffset = $target.offset().left; 
$target.parent().animate({scrollLeft: pScroll + 'px'}, 600); 

Я скрещиваю пальцы на этом;)

Answer 2

Вы должны поместить 4 содержимого меню в

• . установите для них точную ширину и высоту, а также переполнение: скрытый и плавающий элемент в левой части. таким образом, они будут в одну строку, а ваш контейнер - в качестве области просмотра. в jquery вы должны анимировать свойство marginLeft