Question

使用随机位置jquery和悬停/点击功能的组合，在悬停上显示随机位置上的缩略图，并在点击右上角显示完整尺寸。

我有两个问题：

它不适用于视频，当div返回显示时，视频会继续播放：无。此外，视频缩略图不遵循z-index：-50 in chrome并将其置于其他所有内容之上。
这似乎是一种非常复杂的方法。

非常感谢任何帮助。

HTML：

<div class="text">
    <p>Lorem Ipsum is simply dummy</p>
    <div class="hover">
        <a href="http://example.com">text</a>
        <div class="front">
            <img src="http://images.roingbaer.com/ludvig.png"/>
        </div>
    </div>
    <p>, of the printing and typesetting industry.</p>
    <div class="hover">Link 1
        <div class="front">
            <img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg"/>
        </div>
        <div class="back">
            <img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg"/>
        </div>
    </div>
    <p>,</p>
    <div class="hover">Link 2
        <div class="front">
            <iframe frameborder="0" height="233" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="400"></iframe>
        </div>
        d<div class="back">
            <iframe frameborder="0" height="480" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="853"></iframe>
        </div>
    </div>
</div>

CSS：

.back { 
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    text-align:right; 
}

.front { 
    display:none;
    max-height:200px;
    max-width:auto;
    position:fixed;
    z-index:-50;
    top:0;
    right:100px; 
}

.hover { 
    cursor:pointer;
    margin:0;
    padding:0;
    font-style:italic;
    display:inline; 
}

jQuery的：

$(".front").each(function() {
    var right = Math.floor(Math.random()*800);
    var top = Math.floor(Math.random()*500); 
    $(this).css({'margin-right': right});
    $(this).css({'margin-top': top});
});

hoverdiv = $("div.hover")
hoverdiv.on("hover", function() {
    $(this).children(".front").show()
});

hoverdiv.on("mouseleave", function() {
    $(this).children(".front").hide()
})

hoverdiv.on("click", function() {
    $(this).children(".back").toggle()
    $(this).children(".front").hide()
});

Answer 1

您可能需要查看此内容：http://www.trustweb.it/it/blog/download/jquery-html5-video-tooltip.html

Jquery在悬停上的缩略图，点击全图。不行

1 个答案: