0

我有一个非常大的 html 页面（如 7000*5000），我需要使用 javascript 在该页面周围移动用户的视图。

通过删除浏览器滚动条（在 html 上带有溢出：隐藏），我可以很容易地无法让用户自己移动，我接下来需要做的是控制“相机”在 js/jquery 中围绕那个大页面的移动。

即使我搜索了很多，我也没有在网上找到任何东西，除了使用带有平滑 jQuery 滚动的锚点，这可以（即使不是很整洁）以垂直方式移动，但是这样做变得非常复杂它水平。

有什么办法吗？

非常感谢 ：）

4

5 回答 5

2

jQuery scrollTo 和 localScroll 插件非常适合这个。看看这里： http: //flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.html的选项和这里的演示：http ://demos.flesler.com/jquery/scrollTo/

这些插件允许您对动画进行排队并定义同时水平和垂直滚动或垂直然后水平滚动等的设置。

尼尔

于 2012-05-15T21:55:15.280 回答
1

您的主要周围元素、div 或部分（如果您确实有一个），请将其设置得太固定。无需在浏览器窗口中实际滚动，只需重新定位屏幕上的内容并产生滚动效果。用户不会知道区别。

于 2012-05-15T21:56:10.113 回答
0

查看 jQuery 的动画功能。也许你可以做这样的事情：

function movePage(newTop, newLeft){
    $('#pageview').animate({left:newLeft + "px", top: newTop + "px"});
}

请更新您的问题，并说明您何时想要移动页面，我可以尝试为您提供更多帮助。

于 2012-05-15T21:51:43.300 回答
0

如果您的内容溢出其周围的矩形，您仍然可以使用 JS 滚动它 - 无论 CSS 是否显示滚动条。

对于整个窗口，您可以使用window.scrollTo()及其衍生物。

对于单个 DOM 元素，这可以通过设置scrollLeft和scrollTop属性来完成。

使用这两种方法，您将能够构建（jQuery）动画，当然已经有一些插件可以实现这一点。例如，我找到了jQuery.ScrollTo.scrollLeft()，但也许内置方法.scrollTop()足以满足您的目的。在评论中也有类似

 $(someSelector).animate({scrollLeft: someNumber}, 'slow');

提到。

于 2012-05-15T22:09:59.507 回答
0

如果你想做自己的事情，你可以做这样的事情，

var targetOffset = $('#post-10').offset().top ;
var scrollElem = scrollableElement('html', 'body');

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
    // scroll is complete
      location.hash = 'post-10';
});

   // Use the first element that is "scrollable"  (cross-browser fix?)
function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}

这是用于垂直滚动。

对于水平滚动，你可以这样做，

  var targetOffset = $('#post-10').offset().left ;
    var scrollElem = scrollableElement('html', 'body');

    $(scrollElem).animate({scrollLeft: targetOffset}, 400, function() {
        // scroll is complete
          location.hash = 'post-10';
    });

我强烈推荐这个插件，用于具有很多效果的漂亮水平/垂直滚动。

http://demos.flesler.com/jquery/scrollTo/

于 2012-05-17T17:25:13.030 回答