用jQuery（或CSS3）翻转div

我有一个包含图像的div，该图像是网站上另一个页面的链接。我想翻转这个。图像的“反向”内容将是可能包含更多链接的文本。用jQuery（或CSS3）翻转div

我见过翻转，QuickFlip 1 & 2和各种其他插件和CSS3转换的内容，但问题是他们所有（据我发现）涉及单击div本身执行翻转。

因为div包含正面和背面的链接，所以显然不适合我的目的，我需要的是在div/flip-area外部的按钮/ clicker。出于某种原因，我还没有看到任何这样的事情。

任何人都知道任何或有任何想法？

2011-07-08 alkaemia

会这样吗？（使用上述插件之一。）

$('#your_button_outside_div').click(function(){ 
    $('#div_that_you_normally_would_have_to_click').trigger('click'); 
});

，然后就可以把100％的宽度时，“应该是点击” DIV内线高度可见DIV和这样做是为了防止DIV内的点击从执行翻转：

$('#masking_div').click(function(e){ 
    e.stopImmediatePropagation(); 
});

只要确保调整z-索引到你的链接，等等'掩盖DIV'之上。

来源

2011-07-08 20:16:05 wanovak

感谢Wanovak ...听起来很有希望，但我似乎无法得到它与QuickFlip2 ....我会尝试找到另一个插件。 – alkaemia

你可以使用这些插件，并触发click事件

$("#the_element").click(); //This will trigger the plugin events

希望这有助于。欢呼声

来源

2011-07-08 20:16:36

这实际上不起作用....是否有一个插件，做这个顺便说一句？肯定是那里的一个？ – alkaemia

Wanovak在正确的轨道上，但您需要更多的跨浏览器友好的方法来停止事件传播。试试这个：

$('#masked_text').click(function(e){ 

    // Prevent click event from bubbling up the DOM to the parent container 
    try 
    { 
     event.stopPropagation(); 
    } 
    catch(err) 
    { 
     // IE does it this way 
     window.event.cancelBubble=true; 
    } 

});

来源

2011-07-08 20:59:29 AlienWebguy

用jQuery（或CSS3）翻转div

回答

相关问题