使用jQuery擴展鏈接

-2

對於JavaScript和jQuery來說相對較新。我想在我正在構建的站點中引入一個功能，其中有一個文本，並且在該文本中單擊鏈接時會顯示一個視頻。我不希望視頻出現在另一個窗口或另一個選項卡上打開，我想要的是文本的其餘部分只是向下移動以允許顯示視頻的空間。然後，當視頻結束時，它消失，文本回到原始位置。我知道那裏肯定有一些圖書館，我只想指出它。謝謝。 P使用jQuery擴展鏈接

來源

2016-10-25 Paul

嗨，請閱讀：http://stackoverflow.com/tour –

也許的fancybox jQuery插件會解決您的問題：http://fancybox.net/ 它支持顯示圖像，畫廊，IFRAME，在燈箱html和視頻。

首先，您必須在添加Fancybox插件之前加載jQuery。見下圖：

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Website</title> 
    <link href="path/to/jquery.fancybox.css" rel="stylesheet"> 
</head> 
<body> 
    <li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li> 
    <li><a class="fancybox-media" href="http://vimeo.com/47480346">Vimeo</a></li> 

    <script src="path/to/jquery.js"></script> 
    <script src="path/to/jquery.fancybox.js"></script> 
    <script src="path/to/jquery.fancybox-media.js"></script> 
    <script src="path/to/script.js"></script> 
</body> 
</html>

的script.js

(function($) { 
    $('.fancybox-media') 
     .attr('rel', 'media-gallery') 
     .fancybox({ 
      openEffect : 'none', 
      closeEffect : 'none', 
      prevEffect : 'none', 
      nextEffect : 'none', 

      arrows : false, 
      helpers : { 
       media : {}, 
       buttons : {} 
      } 
     }); 
}(jQuery);

下載插件（http://fancyapps.com/fancybox/#license），並檢查該演示以獲取更多信息。

來源

2016-10-25 20:57:56 marcobiedermann

使用jQuery擴展鏈接

回答

相關問題