div双击全屏,再双击恢复到原来的状态vue,js来做
需求是这样的:
有四个视频,视频是在4个区域,点击之后就全屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: ;
}
.getHello{
width:400px;
height: 400px;
background-color: skyblue;
}
body,html{
width: %;
height: %;
}
ul{
width: 1000px;
height: 660px;
}
li{
width: %;
height: %;
float: left;
list-style: none;
background: skyblue;
box-sizing: border-box;
border: 1px solid red
}
.clearfix::after{
content: '';
height: ;
line-height: ;
display: block;
clear: both;
visibility: hidden;
} </style>
</head>
<body>
<!--mvvm里面的v-->
<div id="demo">
<button v-on:click="show = !show" >
Toggle
</button>
<transition name="fade">
<ul class="clearfix">
<!--<li ref="fenpin" v-for="item in items" :key="item.id" @dblclick="dbClick($event)"></li>-->
<li ref="fenpin" @dblclick="dbClick1($event)" :style="{width:width1,height:height1}" v-if="one2"></li>
<li ref="fenpin" @dblclick="dbClick2($event)" :style="{width:width2,height:height2}" v-if="two2"></li>
<li ref="fenpin" @dblclick="dbClick3($event)" :style="{width:width3,height:height3}" v-if="three2"> </li>
<li ref="fenpin" @dblclick="dbClick4($event)" :style="{width:width4,height:height4}" v-if="four2"></li>
</ul>
<!--<p v-if="show" class="getHello" v-on:dblclick="Open()" ref="good" :style="{width:width,height:height}" @keydown="bopy($event)">hello</p>-->
</transition>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script >
//这是mvvm里面的vm
// window.onload=function(){
window.onload = function () {
var vm=new Vue({
el: '#demo',
data: {
show: true,
width1:"50%",
height1:"50%",
width2:"50%",
height2:"50%",
width3:"50%",
height3:"50%",
width4:"50%",
height4:"50%", items:{
key1:'one',
key2:'two',
key3:'three',
key4:'four',
},
one2:true,
two2:true,
three2:true,
four2:true, },
methods: {
Open: function () {
if(this.width=="400px"){
console.log()
this.width="100%"
this.height="100vh"
}else{
this.width="400px"
this.height="400px"
} },
bopy:function(ev){
console.log(,ev)
},
dbClick1:function (e){
console.log(e.target);
if(this.width1=="50%"){
this.two2=false;
this.three2=false;
this.four2=false;
this.width1="100%";
this.height1="100%";
}else{
this.two2=true;
this.three2=true;
this.four2=true;
this.width1="50%";
this.height1="50%"; } },
dbClick2:function (e){
if(this.width2=="50%"){
this.one2=false;
this.three2=false;
this.four2=false;
this.width2="100%";
this.height2="100%";
}else{
this.one2=true;
this.three2=true;
this.four2=true;
this.width2="50%";
this.height2="50%"; } },
dbClick3:function (e){
if(this.width3=="50%"){
this.one2=false;
this.two2=false;
this.four2=false;
this.width3="100%";
this.height3="100%";
}else{
this.two2=true;
this.one2=true;
this.four2=true;
this.width3="50%";
this.height3="50%"; }
},
dbClick4:function (e){
if(this.width4=="50%"){
this.one2=false;
this.two2=false;
this.three2=false;
this.width4="100%";
this.height4="100%";
}else{
this.two2=true;
this.one2=true;
this.three2=true;
this.width4="50%";
this.height4="50%"; } }, }, })
} </script> </body>
</html>
div双击全屏,再双击恢复到原来的状态vue,js来做的更多相关文章
- iOS 多个播放器同时播放，双击全屏，单击退出全屏
前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...
- VC一些经验系列：《平均绘画矩形图，双击全屏》
1.RGB宏报错 RGB宏是这样的, #define RGB(r,g,b) ((COLORREF)(((BYTE)(r)|((WORD)((BYTE)(g))<<8))| ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- C#中如何禁止WindowsMediaPlayer双击全屏显示
问题描述:在项目中使用WindowsMediaPlayer播放视频时,双击会出现视频全屏的效果,而且视频恢复后会暂停,除非再次双击返回后才能正常播放.那么如何禁止WindowsMediaPlayer的 ...
- div 自动全屏高度
最近做一个页面,需要一个div自动铺满全屏,但是高度总是难以搞定.查资料为:需要从html body到div 需要 设置 高度属性 为100%
- 解决ubuntu下firefox的flash全屏后不能恢复问题 ZT
sudo mkdir /etc/adobe echo "OverrideGPUValidation=true" >~/mms.cfg sudo mv ~/mms.cfg /e ...
- video 全屏，播放，隐藏控件。
requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscre ...
- QT中关于窗口全屏显示与退出全屏的实现
近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
随机推荐
- iOS - 适配iOS 11
http://www.10tiao.com/html/330/201707/2653579210/1.html 存档 导语:iOS 11 为整个生态系统的 UI 元素带来了一种更加大胆.动态的新风格. ...
- Javap与JVM指令
一.javap命令简述 javap是jdk自带的反解析工具.它的作用就是根据class字节码文件,反解析出当前类对应的code区(汇编指令).本地变量表.异常表和代码行偏移量映射表.常量池等等信息.当 ...
- ZYNQ block design警告：[BD 41-968] AXI interface port /axi_lite4 is not associated to any clock port. It may not work correctly.
前言 在Block design中引出AXI接口给外部,检查设计告警如下: [BD 41-968] AXI interface port /axi_lite4 is not associated to ...
- fastjson反序列化漏洞研究(下)
之前的文章显示字符太多 拒绝显示 只好分为两篇了 这样我们只需要找到可以利用的类,构造poc链就好了,这个和以前的java反序列化漏洞类似,先不说.网上最早的poc是使用com.sun.org.ap ...
- AOP初识
AOP是Aspect Oriented Programing的简称,面向切面编程.AOP适合于那些具有横切逻辑的应用:如性能监测,访问控制,事务管理.缓存.对象池管理以及日志记录.AOP将这些分散在各 ...
- SQL PLUS 远程连接数据库
-- SQL PLUS 远程连接Oracle数据库(WINDOWS+SQL PLUS)命令:用户名/密码@ip地址[:端口]/service_name [as sysdba] EG: ORCL/ORC ...
- Android笔记（四十七） Android中的数据存储——XML（三）SAX解析
SAX是一个解析速度快并且占用内存少的xml解析器,非常适合用于Android等移动设备. SAX解析XML文件采用的是事件驱动,也就是说,它并不需要解析完整个文档,在按内容顺序解析文档的过程中,SA ...
- centos7.5 配置sftp
1.创建sftp组 groupadd sftp 2.sftp组的用户的home目录统一指定到/u01/sftp下 mkdir -p /u01/sftp/ 3.创建一个sftp用户,用户名为devsft ...
- LAMP环境源码编译安装过程
LAMP环境源码编译安装过程 一.Apache的安装 1.1.apache软件包及依赖包准备 httpd-2.4.29.tar.bz2 apr-1.6.3.tar.gz apr- ...
- 《你说对就队》第七次作业：团队项目设计完善&编码
<你说对就队>第七次作业:团队项目设计完善&编码 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 <你说对就队> ...