jquery - 复制时的 3d viewport jquery 问题

Question

问题仅在 FF 和 Chrome 中存在。 Hughes 为 IE 修复了它

我目前在一个网站上工作，我在其中使用视差效果来伪造 3D 效果。我使用的脚本是 smart3d(jQuery 插件)。

我制作的第一张幻灯片效果很好(尽管出于某种原因 100% 宽度实际上不是 100%)。如果我复制它，它会在悬停时更多地向右侧移动。如果我再次复制它...它会移动得更多。

我找不到问题所在，所以我决定向你们寻求帮助。您可以在此处查看问题:http://basenharald.nl/3d/

我在几个 LI 项上加上了边框，这样我的意思就更清楚了。

希望大家帮帮忙。

顺便说一句:当我使用 px 而不是 % 时，我遇到了同样的问题，所以这不是答案。

Answer 1

这是 smart3d 中的一个错误。它针对垂直滚动进行了正确调整，但不考虑水平滚动。我找到了相关代码，这里是有关如何修复它的说明。

打开文件 jquery.smart3d.js，在第 69 行附近，您将找到我们将 mousemove 函数绑定(bind)到 smart3d 容器的位置:

thisObj.mousemove(function(e){
    if (settings['horizontal']) {
        var x = e.clientX - thisObj.offset().left;
        ...

我们需要做的是考虑水平滚动，就像它已经对垂直滚动所做的那样。将函数改为:

thisObj.mousemove(function(e){
    if (settings['horizontal']) {
        var st = $('html').scrollLeft();
        var x = e.clientX - thisObj.offset().left + st;
        ...

保存文件并重新加载页面。

这应该解决您的问题，因为它与脚本处理垂直偏移的方式相同。不过我自己还没有尝试过!