Question

我正在建立一个严重依赖jquery的网站。我有三个脚本我试图在同一页面上使用：一个lavalamp风格的菜单，一个带有可拖动div的区域，以及一个包含两个元素的content slider，允许我在内容区域之间滚动。

我无法让内容滑块正常运行。链接将把我带到其他内容区域，但除非我摆脱了熔岩灯代码，否则“滑动”效果无法正常工作。有什么方法可以调整javascript，以便这三个脚本可以一起工作吗？

$(document).ready(function() {

$('a.panel').click(function () {

    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#scroll-wrapper').scrollTo($(this).attr('href'), 800);       

    return false;
});

$(window).resize(function () {
    resizePanel();
});

});

function resizePanel() {
width = $(window).width();
height = $(window).height();

mask_width = width * $('.item').length;

$('#debug').html(width  + ' ' + height + ' ' + mask_width);

$('#scroll-wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#scroll-wrapper').scrollTo($('a.selected').attr('href'), 0);

}


    $(function() {
        $("#3").lavaLamp({
            fx: "backout", 
            speed: 700,
            click: function(event, menuItem) {
                return false;
            }
        });
        $("#dragset div").draggable({ stack: { group: '#dragset div', min: 1 } });
    });

Answer 1

Geez，我研究了代码，但找不到任何可能导致熔岩灯和内容滑块之间出现问题的东西。

我的建议：

检查你的CSS是否有LavaLamp，也许它正在影响它的大小项目，因此滚动无法正确移动。
首先尝试使用垂直/水平移动，因为它更容易调试。
进行更多调试，以确保不兼容的是lavaLamp和内容滑块。
取出resizePanel代码（现在），确保所有组件都能正常工作，它们会混合搭配。

将jquery熔岩灯菜单和draggables与内容滑块相结合

1 个答案: