javascript - 选择特定链接后，如何在同一位置显示五个视频之一？

Question

我有五个 5 div，悬停在这些 div 上时，我在对话框中显示内容...右侧对话框我想放置各个 div 的视频..

在 div1 的悬停上它应该显示第一个视频，在第二个 div 的悬停上它应该显示第二个视频等等......

那么如何在各个div的悬停时在同一位置显示不同的视频？？？

以下是截图：

请尽快回复..提前谢谢...

Answer 1

I have made one simple fiddle as per your requirement. Please check below link.

http://jsfiddle.net/vvbsr/2/

Answer 2

如果您使用的是一个视频对象，您可以更改 src 属性。还没有测试过这个，但它看起来很有希望......

方法1：将您的视频网址存储在一个数组中

var initVideos = function(){
    var videos = ["http://urlVideo1.flv", "http://urlVideo2.flv", ...],
        videoArea = $("#videoArea"),
        divs = $("ul li div"); // or some other selector for your HTML

    // bind your hover event to the divs
    divs.hover(
        // mouseover
        function(){
            videoArea.show();
            videoArea.find("object > embed").prop("src", videos[$(this).index()]);
        },
        // mouseout
        function(){
            videoArea.hide();
        }
    );
};

// once the DOM is ready
(function(){
    initVideos();
});

演示：http: //jsfiddle.net/tive/J6WQm/

要对此进行微调，您应该仅在加载前一个事件完成后更改 src。否则，当您将鼠标悬停得太快时，浏览器可能会产生过多的回流。

此外，根据您使用的对象，代码可能会有所不同。目前我只触发嵌入对象（mozzila 浏览器），但对象（IE）也应该在参数电影值上触发。

为了应对这些不同的对象程序逻辑，人们使用swf 对象为您生成该代码块。现在这已经过时了一段时间。

因此，更合适的方法可能是使用flashembed

方法 2：使用菜单中链接的 href 属性

var initVideos = function () {
    var divs = $("ul li a");

    // bind your hover event to the divs
    divs.mouseenter(
        // mouseover
        function () {
            flashembed("videoArea", $(this).prop("href"));
        });
    };

    // once all is loaded
    $(window).load(function () {
        initVideos();
    });

演示： http: //jsfiddle.net/tive/Ff7Mq/ 不幸的是，这个库在 jsfiddle 中不起作用。还支持 jquery 1.7。也许有人知道一个最新的插件。

编辑：只需要 CSS 就可以使它工作^^