Question

JavaScript和jQuery相对较新。我想在我正在构建的网站中引入一个功能，其中有一个文本，当在该文本中点击链接时，会出现一个视频。我不希望视频出现在不同的窗口或其他标签上打开，我想要的是文本的其余部分向下移动以允许显示视频的空间。然后，当视频结束时，它消失，文本回到原始位置。我知道那里肯定有一些图书馆，我只想指出它。谢谢。 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扩展链接

1 个答案: