EXAMPLE

Question

我有一个有图像的div。当我点击图像时，我喜欢将具有图像的点转换为嵌入式视频：

<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe>

任何帮助将不胜感激。我希望尽可能不刷新页面。

Answer 1

编辑：这是一个可以使用的小提琴：http://jsfiddle.net/9pdX6/

这取决于您从哪里获取视频ID。

假设你有这个：

<img data-id="DxkEe_l7S3g" src="some_image" />

然后你可以实现你想要的东西：

$('img').click(function() {
    $(this).replaceWith(
        '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + 
        $(this).data('id') + '" frameborder="0" allowfullscreen></iframe>'
    );
});

Answer 2

你可以这样做：

$('#yourImage').click(function(){
    $(this).replaceWith('<iframe>',{
        width: 560,
        height: 315,
        src: 'http://www.youtube.com/embed/DxkEe_l7S3g',
        frameborder: 0,
        allowfullscreen: true
    });
});

或者：

$('#yourImage').click(function(){
    $(this).after('<iframe>',{
        width: 560,
        height: 315,
        src: 'http://www.youtube.com/embed/DxkEe_l7S3g',
        frameborder: 0,
        allowfullscreen: true
    }).remove();
});

或者：

$('#yourImage').click(function(){
    $(this).parent().html('<iframe>',{
        width: 560,
        height: 315,
        src: 'http://www.youtube.com/embed/DxkEe_l7S3g',
        frameborder: 0,
        allowfullscreen: true
    });
});

Answer 3

查看jQuery的html()函数。这允许您获取HTML并将其转储到容器中。

Answer 4

$(document).ready(function(e) {
    $("#yourImageID").click(change);
});

function change(){
    $("#imgParentDivID").html('<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe>');
}

Answer 5

有很多选择。最简单的一个可能是jQuery .replaceWith函数，用你所暗示的新元素替换当前元素对象。

像这样：

var vid = $("<iframe />", { frameborder: 0, src: "http://www.youtube.com/embed/DxkEe_l7S3g" }).css({ height: "315px", width: "560px" });

$(function() {
    $(document).on("click", "img", function(e) {
        $(this).replaceWith(vid);
    });
})

EXAMPLE

另一种选择是将Iframe放在HTML上，将其CSS分配给display: none;并使用jQuery的fadein / fadeout来实现“优雅”效果。像这样：

$(function() {
    $(document).on("click", "img", function(e) {
        $(this).fadeOut("slow", function(e) { $("iframe").fadeIn("fast"); });
    });
})

EXAMPLE

我不确定你究竟在寻找什么，但是由于jQuery的预定义的javascript库，如果不是100个方法就可以做几十个问题。这些例子只是2！

Answer 6

让我们说图像

<img src="..." data-src="http://www.youtube.com/embed/DxkEe_l7S3g"/>

使用jQuery

$(document).on("click","img",function(){
    var frame = '<iframe width="560" height="315" src="'+$(this).data("src")+'" frameborder="0" allowfullscreen></iframe>';
    $(this).replaceWith(frame);
});

Jquery点击图片

6 个答案:

EXAMPLE

EXAMPLE