Question

我正在研究www.alwaystwisted.com。该页面有4个div，可以通过主链接向下或向上滚动，具体取决于您所在的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>

我期待一个有用的答案。在此先感谢，Stu。

Answer 1

注意：我没有测试您的代码的准确性，也没有检查我的更改是否有效。我只是拿了你的代码，把“顶部”改为“左”，基本上希望最好：）

在重新格式化代码之后：

$(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个菜单内容放在＆lt; UL＆GT;每个人在＆lt;利取代。为它们设置准确的宽度和高度并且溢出：隐藏，并且在＆lt;立GT; S。这样他们将在一行中，您的容器作为视口。在jquery你应该动画＆lt; ul＆gt;的marginLeft属性

使用jQuery滚动div“left and right”和“up and down”

2 个答案: