在 jquery 中使用 iframe 创建 div
Create a div with iframe in jquery
当有人点击图片时,屏幕会变暗并播放视频。但它不起作用,任何帮助将不胜感激。谢谢你。 (我正在使用 bootstrap 和 fullpage.js)
HTML:
<html>
<body>
<div class="row">
<div class="col-lg-3">
<img "myImg" scr="images/myimage.jpeg" myVideo="https://youtube.com/embed/" width="100%">
</div>
</div>
</body>
</head>
Jquery:
$("#myImg").click(function(){
video = '<iframe src="'+ $(this).attr('myVideo') +'" width="600px" height="auto"></iframe>';
div = document.createElement('div');
div.style.backgroundColor = "rgba(0,0,0,0.9)";
div.style.position = "absolute";
div.style.width = "100vw";
div.style.height = "100vh";
div.style.left = "0";
div.style.top = "0";
div.style.verticalAlign = "middle";
div.html = video;
document.getElementsByTagName('body')[0].appendChild(div);
});
有几个错误:
1) 您的 jQuery click
事件正在寻找对 ID 为 myImage
的元素的点击,但您的图像目前没有 ID。将 <img "myImg" ...
更改为 <img id="myImage" ...
以修复点击事件。
2) 您在 <img>
.
上将 src
(来源)拼错为 scr
3) HTML 是在使用带有 .innerHTML
的 JS 元素上设置的,而不是 .html
。将 div.html = video;
更改为 div.innerHTML = video;
。
更改这些将使您的代码执行。工作预览:
$("#myImage").click(function() {
video = '<iframe src="' + $(this).attr('myVideo') + '" width="600px" height="auto"></iframe>';
div = document.createElement('div');
div.style.backgroundColor = "rgba(0,0,0,0.9)";
div.style.position = "absolute";
div.style.width = "100vw";
div.style.height = "100vh";
div.style.left = "0";
div.style.top = "0";
div.style.verticalAlign = "middle";
div.innerHTML = video;
document.getElementsByTagName('body')[0].appendChild(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-lg-3">
<img id="myImage" src="http://placehold.it/350x150" myVideo="https://youtube.com/embed/" width="100%">
</div>
</div>
</body>
当有人点击图片时,屏幕会变暗并播放视频。但它不起作用,任何帮助将不胜感激。谢谢你。 (我正在使用 bootstrap 和 fullpage.js)
HTML:
<html>
<body>
<div class="row">
<div class="col-lg-3">
<img "myImg" scr="images/myimage.jpeg" myVideo="https://youtube.com/embed/" width="100%">
</div>
</div>
</body>
</head>
Jquery:
$("#myImg").click(function(){
video = '<iframe src="'+ $(this).attr('myVideo') +'" width="600px" height="auto"></iframe>';
div = document.createElement('div');
div.style.backgroundColor = "rgba(0,0,0,0.9)";
div.style.position = "absolute";
div.style.width = "100vw";
div.style.height = "100vh";
div.style.left = "0";
div.style.top = "0";
div.style.verticalAlign = "middle";
div.html = video;
document.getElementsByTagName('body')[0].appendChild(div);
});
有几个错误:
1) 您的 jQuery click
事件正在寻找对 ID 为 myImage
的元素的点击,但您的图像目前没有 ID。将 <img "myImg" ...
更改为 <img id="myImage" ...
以修复点击事件。
2) 您在 <img>
.
src
(来源)拼错为 scr
3) HTML 是在使用带有 .innerHTML
的 JS 元素上设置的,而不是 .html
。将 div.html = video;
更改为 div.innerHTML = video;
。
更改这些将使您的代码执行。工作预览:
$("#myImage").click(function() {
video = '<iframe src="' + $(this).attr('myVideo') + '" width="600px" height="auto"></iframe>';
div = document.createElement('div');
div.style.backgroundColor = "rgba(0,0,0,0.9)";
div.style.position = "absolute";
div.style.width = "100vw";
div.style.height = "100vh";
div.style.left = "0";
div.style.top = "0";
div.style.verticalAlign = "middle";
div.innerHTML = video;
document.getElementsByTagName('body')[0].appendChild(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="row">
<div class="col-lg-3">
<img id="myImage" src="http://placehold.it/350x150" myVideo="https://youtube.com/embed/" width="100%">
</div>
</div>
</body>