onclick 获取点击之后的img 的id_前端，点击按钮跳出视频带蒙层，且视频永远居于屏幕中间...

1.前言：

做之前问了一下度娘，发现参考好像很少，就把我这个不成熟的代码放上来，做个参考（刚入行没多久，代码比较迷，接受批评）

2.实现效果：

视频点击播放前的区域效果

点击这个button按钮图，视频弹出，其余可视部分蒙层

视频弹出以后就是酱紫的

3.设计思路：

（1）未弹出之前video区域是一个组合图（一张背景图和一个按钮图），给按钮添加js点击事件，点击按钮mask层弹出

//已经按设计师要求修改为点击整个背景图区域就可以弹出mask层

（2）mask层有两大层（蒙层mask和视频区show层），show层又包含两层（video层放视频，close层放关闭按钮）

（3）mask弹出后可以点击关闭按钮关闭mask层

***注意：

mask层的层级一定要高与页面其他层，默认要设置为displaynone，否则一打开网站mask层就默认出现

4.实现代码：

（1.）这个块是第一张图，视频未弹出时候放置图片的地方

<div className="video"><button className="vBg"><img src={`${baseUrl}img/ark share_ player.png`} ></img><div className="vStart" id="start"><img src={`${baseUrl}img/player _but_nor.png`} ></img></div></button></div>

样式

.introduce .main .video{padding-left: 2em;float: right;width: 50%;
}.introduce .main .video .vBg{position: relative;display: inline-block;cursor: pointer;border: 0;box-shadow: 0 1px 6px 0 rgba(95,125,252,50) ;
}
.introduce .main .video .vStart{position: absolute;right: 1.7em; bottom: 1.5em;width: 40px;height: 40px;cursor: pointer;
}.introduce .main .video .vStart:hover {position: absolute;right: 1.6em; bottom: 1.3em;width: 43px;height: 43px;
}

（2.）视频弹出播放时

 <div className="mask"><div className="show"><button className="close"><img src={`${baseUrl}img/ios-close.svg`}/></button><video controls className="pArea"><source src={`${baseUrl}video/ark_design.mp4`} type="video/mp4"></source></video></div>
</div>

样式

.mask{position: fixed;top: 0; bottom: 0;width:100vw;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.3);z-index: 100;display: none;
}
.mask .show{width:900px; height:500px;border: 0;position: relative;
}
.mask .show :focus{outline: none;
}
.mask .show :hover{outline: none;
}
.mask .show video{width: 100%;height: 100%;z-index: 100;/* float: left; */background-color: #000;
}.mask .show .close{background-color:rgba(0, 0, 0, 0) ;border: 0;cursor: pointer;
}
.mask .show .close img{width: 36px;height: 36px;
}
.mask .show .pArea{float: left;width:calc(100% - 36px - 1em);margin-top: 36px;
}

（3.）点击事件

setTimeout(() => {//这个是点击背景图片播放视频document.getElementsByClassName("vBg")[0].onclick = () =>{console.log("22222");var maskBlock = document.getElementsByClassName("mask")[0];maskBlock.style.display = "flex";}//这个是点击x关闭按钮document.getElementsByClassName("close")[0].onclick = () =>{console.log("22222");var maskBlock = document.getElementsByClassName("mask")[0];maskBlock.style.display = "none";}}, 100)

onclick 获取点击之后的img 的id_前端，点击按钮跳出视频带蒙层，且视频永远居于屏幕中间...相关推荐

jquery 监听td点击事件_安卓开发监听点击事件的一种方法
本人是菜鸟一只,学习安卓纯属兴趣.没有真正上过编程课程,所有知识都是在网上获取的.今天分享的是监听点击事件的一个方法,这个方法的好处是代码较简洁. 如图,点击保存时,把上面的数据入库. 实现如下: 在 ...
python手机连续点击脚本_selenium+python自动化86-循环点击遇到的坑
selenium定位一组元素,批量操作循环点击的时候会报错:Element not found in the cache - perhaps the page has changed since it ...
android 点击图片事件,android图文混排点击事件
图文混排顾名思义就是把文字和图片混合排列在一起,比较简单的需求我们也可以通过TextView和ImageView配合使用来达到目的,但是遇到稍微复杂一些的情况这种方法就不适用了. 做这样一个按钮: 对 ...
鼠标点击时隐藏java代码,js实现点击展开隐藏效果（实例代码）
本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: 事件冒泡-提示框 button { wi ...
android 元素点击位置,appium自动化操作之元素定位点击事件全家桶（find_element_by、find_elements_by)...
一.根据resource_id定位(resourceId等价于by_id) 1.find_element_by_id和find_elements_by_id (1)单个resource_id操作 dr ...
不用点击_网站推广怎么样才能提高点击量和转化率-西安青云在线
现在很多企业做网络营销采取的方式都的广撒网,不论是什么信息先做好大面积的发布,但是这样的情况却不是很好,为什么呢?原因很简单,那就是没有明确的核心推广的关键词,看到别人做什么词自己就做什么词,这种情况 ...
微信小程序(三)自定义分享按钮和原生分享区分不同按钮的分享带参数分享和获取
大家有不会的可以进群交流官方的分享点击右上角的三个点 /*** 用户点击右上角分享*/onShareAppMessage: function(ops) {wx.showShareMenu({wit ...
点击edittext 区域外隐藏输入法和点击edittext 显示输入法
在界面开发过程中,需要使用edittext来输入内容用来匹配查找,然后点击其他区域收起输入法. 本文在一个布局里有edittext 和一个list view ,edittext 输入内容,搜索list ...
android仿微信、QQ等聊天界面，实现点击输入框弹出软键盘、点击其他区域收起软键盘，默认滑动至最低端
如图所示,点击输入框及选择图片和发送按钮时软键盘显示且不消失,点击其他区域,则隐藏软键盘. 主要代码如下: override fun dispatchTouchEvent(ev: MotionEven ...

onclick 获取点击之后的img 的id_前端，点击按钮跳出视频带蒙层，且视频永远居于屏幕中间...

onclick 获取点击之后的img 的id_前端，点击按钮跳出视频带蒙层，且视频永远居于屏幕中间...相关推荐

最新文章

热门文章