html中怎么点击图片弹出视频?
发布网友
发布时间:2022-04-22 22:59
我来回答
共3个回答
热心网友
时间:2023-04-29 02:31
头标签代码如下:
<link href="css/layerModel.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.layerModel.js"></script><script type="text/javascript">$(function(){ $("#demoBtn1").click(function(){ $('#demo1').layerModel({ blurClose : true }); });
});
body代码如下:
<a href="#" id="demoBtn1" class="run"> <img src="img/three-video2.png"> <span class="over-text" style="float:left;width:90%;">案例视频影视官网2.0</span> </a>
<!--弹出视频的代码--> <div id="demo1" class="gpc-t-box"> <div class="gpc-video-t"> <embed allowscriptaccess="always" allownetworking="all" allowfullscreen="true" width="670" height="377" type="application/x-shockwave-flash" src="http://cloud.video.taobao.com/play/u/2182797685/p/1/e/1/t/7/38483233.swf"> </embed> </div> <div class="gpc-video-t1"> <div class="gpc-video-t1-lf"> <h2 class="gpc-video-t1-lf-1">案例视频影视官网</h2><span class="gpc-video-t1-lf-2"><img src="img/read.png" />17502</span> </div> <div class="gpc-video-t1-rt"> <span>¥15,000</span>起 </div> </div> <div class="gpc-video-t2"> <div class="gpc-video-t2-lf"> <p class="gpc-a1-8"><a href="#">来来</a> <a href="#">发布于</a> <a href="#">2016-06-09</a><a href="#">时长:00:20:00</a></p> </div> <div class="gpc-video-t2-rt"> <a class="gpc-a1-9" href="detail.php">查看更多详情>></a> </div> </div> </div> <!--/end-->
热心网友
时间:2023-04-29 02:31
需要JS控制,点击图片生成一个弹窗,同时让其自动播放,点击弹窗上的关闭按钮或者点击弹窗以外的地方销毁弹窗。
热心网友
时间:2023-04-29 02:31
使用html5的video标签,标签先隐藏,给图片增加onclick事件,弹出视频。
超文本标记语言, 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。
一个网页对应多个 HTML文件, 超文本标记语言文件以.htm为 扩展名或.html为 扩展名。可以使用任何能够生成 TXT类型 源文件的文本编辑器来产生超文本标记语言文件,只用修改文件 后缀即可。
万维网上的一个 超媒体文档称之为一个 页面。作为一个组织或者个人在 万维网上放置开始点的 页面称为 主页或首页,主页中通常包括有指向其他相关页面或其他节点的指针。
这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面的有机集合称为 网站。超级文本标记语言是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的 Web技术,可以创造出功能强大的网页。因而,超级文本标记语言是万维网编程的基础,也就是说 万维网是建立在超文本基础之上的。