0

你好我有这个代码：

function goto(id, t){   
    //animate to the div id.
    $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500);

    // remove "active" class from all links inside #nav
    $('#nav a').removeClass('active');

    // add active class to the current link
    $(t).addClass('active');

}

此代码激活幻灯片的水平滚动，并且在幻灯片的单个页面内呈现更多 div（div1、div2、div3），并且在每个 div 处附加此代码：

$("#div1").hover(function() {
    var $this = $(this);
    $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
       'height': "390",
       'width' : "840",
       'marginTop' : "-12",
       'marginLeft' : "-12",
    });
},
function() {
   var $this = $(this);
   $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
       'height': "350",
       'width' : "800",
       'marginTop' : "0",
       'marginLeft' : "0"
    });
});

这是 HTML 中的代码：

<a href="#" onClick="goto('#about', this); return false; " >
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;">
                                    ABOUT
                                 </div></a>

问题是，当我单击幻灯片放映页面之一中存在的 div 时，例如 div1，并且我需要它在第二页上水平移动，让 div 内的鼠标随着滚动而移动并且不要' t 停留在第一个页面，我该如何避免这种情况？

我希望当我单击系统时转到幻灯片的第二页，但不与他一起拖动我单击的 div 以移动到第二页。

4

1 回答 1

0

更改了以下代码，在goto(). 在这里我检查是否#div2处于悬停状态。

如果是，那么我把它恢复到原来的状态，然后我才移动到下一页。

if (parseInt($("#div2").css("z-index"), 10) > 1) {
    $("#div2").css({
        'z-index': '1',
        'boxShadow': '0px 0px 0px ',
        'position': 'static'
    }).animate({
        'height': "250",
        'width': "250",
        'marginTop': "0",
        'marginLeft': "0"
    }, function(){
        $(".contentbox-wrapper").animate({
        "left": -($(id).position().left)
       }, 600);
   });
}
else {
    $(".contentbox-wrapper").animate({
        "left": -($(id).position().left)
    }, 600);
}

在这里检查

更新：

只需添加一个 else 条件，检查上面的更新代码。

关联

于 2013-06-21T09:21:57.270 回答