使用 jQuery 扩展 link

Question

相对于 JavaScript 和 jQuery 较新。我想在我正在构建的站点中介绍一个功能，其中有一个文本，当在该文本中单击 link 时，会出现一个视频。我不希望视频出现在不同的 window 或另一个打开的选项卡上，我想要的是其余文本只是向下移动以允许 space 显示视频.然后，当视频结束时，它会消失，文本会回到原来的位置。我知道那里一定有一些图书馆，我只是想被指点一下。谢谢。 P

Answer 1

也许 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) 并查看演示以了解更多信息。

使用 jQuery 扩展 link

Using jQuery to expand a link

html

javascript

jquery

jquery-ui

libraries