1

所以我正在尝试使用hoverIntent来控制某些图像上的延迟悬停。暂时悬停时图像会放大。不过，这是有条件的，我似乎无法理解它。如果它在屏幕的左侧，它会像平常一样放大，但如果它在屏幕的右侧，它也会向左移动。

$(".card").live('click', function () {
    windowWidth = $(window).width();
    var id = $(this).attr('id');
    var offset = $(this).offset();
    var pos = offset.left;

        if (windowWidth - pos < 500) {      
            var config = {
                over: alert(id+" right"),
                timeout: 500,
                out: alert('out'),
                sensitivity: 7,
                interval: 500
            }
        $(this).hoverIntent( config )           
        }

        else (pos < 500) {
            var config = {
                over: alert(id+" left"),
                timeout: 500, 
                out: alert('out'),
                sensitivity: 7,
                interval: 500
            }
            $(this).hoverIntent( config )
        }
})

现在，我真的很希望它在没有该.live('click')功能的情况下工作（这只是为了测试目的而单击），但我不知道如何将我的变量分配给鼠标悬停的内容（以定位图像）。

理想情况下，我想做一个.live('hoverIntent')，但这不起作用，或者我只是不确定如何完成它。

有些东西告诉我，我把整个事情搞砸了。 http://magic.cardbinder.com/进行测试。感谢您的帮助！

4

1 回答 1

1

委托点击并放弃意图插件

如果要委托事件，请在带有选择器的主体上使用 $.on 将它们固定到 .card 元素。

$("body").on("click", ".card", function(){
    //event script here
});

至于脚本的其余部分，我认为您可能想要一些更健壮的东西。

首先检查图像离屏幕多远。屏幕宽度会有所不同，因此如果 a) 图像仅偏离 10px，b) 图像偏离屏幕超过 500px，则在屏幕上将其敲回 500px 不会削减它。

接下来，您将需要重新考虑意图插件；真的有必要吗？自己写会更好：

var tOut;

$("body").on("mouseover", ".card", function(){
    clearTimeout(tOut);
    tOut = setTimeout(function(){
        //enlarge!
    }, 300);
});

这只是一个开始，但它应该有助于朝着正确的方向发展

于 2012-10-17T22:47:07.320 回答