視頻懸停效果

我想使這是當鼠標移到它應該彈出一個視頻，就像一個在這個website 視頻懸停效果

我一直在試圖找到一個解決方案，用於對圖像的視頻懸停效果這個問題在過去的幾個月裏。

有誰知道該怎麼做？

這實際上是我設法獲得的圖像懸停效果。因此，不是彈出圖像，有沒有什麼方法讓視頻像圖像一樣彈出？

<html> 
<head> 
<title>Test</title> 
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> 


<script type="text/javascript"> 


$(document).ready(function() { 


    $('div.thumbnail-item').mouseenter(function(e) { 


     x = e.pageX - $(this).offset().left; 
     y = e.pageY - $(this).offset().top; 


     $(this).css('z-index','15') 
     .children("div.tooltip") 
     .css({'top': y + 10,'left': x + 20,'display':'block'}); 

    }).mousemove(function(e) { 


     x = e.pageX - $(this).offset().left; 
     y = e.pageY - $(this).offset().top; 


    $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); 

    }).mouseleave(function() { 


     $(this).css('z-index','1') 
     .children("div.tooltip") 
     .animate({"opacity": "hide"}, "fast"); 
    }); 

}); 


</script> 
<style> 

    .thumbnail-item { 

position: relative; 
float: left; 
margin: 0px 5px; 
    } 

     .thumbnail-item a { 
display: block; 
     } 

    .thumbnail-item img.thumbnail { 
border:3px solid #ccc; 
    } 

     .tooltip { 

display: none; 

position: absolute; 

padding: 8px 0 0 8px; 
     } 

.tooltip span.overlay { 

    background: url(images/overlay.png) no-repeat; 

    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: block; 
    width: 350px; 
    height: 200px; 
} 
</style> 
    </head> 
    <body> 



<div class="thumbnail-item"> 
    <a href="#"><img src="images/Capture1.jpg" class="thumbnail"/></a> 
    <div class="tooltip"> 
     <img src="images/2 Davis Road.jpg" alt="" width="330" height="185" /> 
     <span class="overlay"></span> 
    </div> 
</div> 

<div class="thumbnail-item"> 
    <a href="#"><img src="images/Capture2.jpg" class="thumbnail"/></a> 
    <div class="tooltip"> 
     <img src="images/Camberwell Town Hall, Roof Restoration.jpg" alt="" width="330" height="185" /> 
     <span class="overlay"></span> 
    </div> 
</div> 

<div class="thumbnail-item"> 
    <a href="#"><img src="images/Capture3.jpg" class="thumbnail"/></a> 
    <div class="tooltip"> 
     <img src="images/Children.jpg" alt="" width="330" height="185" /> 
     <span class="overlay"></span> 
    </div> 
</div>  

<div class="clear"></div>

來源

2013-12-12 smb1515

你已經花了幾個月努力的？顯示你的嘗試。如果我花五分鐘時間查看該頁面的源代碼，我可以輕鬆地找到它們如何處理鼠標懸停，提供內容以及內容是什麼。 – paddy

@paddy：我已經添加了我擁有的代碼。請看看它 – smb1515

當網站這樣做時，我*討厭*。我不小心將鼠標移到了某物上，彈出了一段視頻並鎖定了我的上網本。我一直試圖關閉它，但視頻和頁面上的所有其他JavaScript使事情太慢，我甚至無法使用我的電腦。 – 2013-12-12 06:55:55

你可以使用jQuery與事件偵聽器（mouseenter和mouseleave）在提示插入視頻元素。 Bootstrap和jQuery UI提供了很棒的工具提示，您可以在自己的網站上使用它。

下面是使用jQuery的代碼示例：

$(".video").on("mouseenter", function(){ 
    var video = "<video></video>"; // remember to add the src attribute, etc... 

    // code for displaying tooltip 

    $(".tooltip").append(video); // assuming tooltip has class of .tooltip 

    $(this).on("mouseleave", function(){ 
     // code here for hiding the tooltip when the hover stops 
    } 
})

來源

2014-01-05 17:07:59 hitecherik

視頻懸停效果

回答

相關問題