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() ...
随机推荐
- windows下cuda的安装
1. cuda的安装 到 https://developer.nvidia.com/cuda-toolkit 去下载.在安装的时候一定要自定义安装,否则将会安装很多无用的东西.安装的选项,可以选择不更 ...
- 阿里云ssl协议发布qq邮件
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- SSRF绕过IP限制方法总结
SSRF绕过IP限制方法总结 - Summary of SSRF methods for bypassing IP restrictions -https://www.cnblogs.com/iAmS ...
- linux学习记录--比较基本的文件档案知识
[档案类型权限,连接数,档案拥有者,档案所属群组,档案容量,修改日期,档名],对应了上面的每一列的参数属性. 档案类型权限那一部分总共有十个字母,第一个字母代表档案类型: 当为[ d ]则是目录,例如 ...
- yum 异常解决一例
http://mirrors.cloud.aliyuncs.com/centos/6/os/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 ...
- SQL进阶系列之2自连接
写在前面 一般地,SQL的连接运算根据其特征的不同,有着不同的名称,比如内连接.外连接.交叉连接等,这些连接大多是以不同的表或视图为对象进行的,针对相同的表进行的连接成为自连接.理解自连接有助于我们理 ...
- python抽象基类
抽象基类 抽象基类提了一种方式,用以组织对象的层次结构,做出关于所需方法的断言,以及实现其他一些功能 要定义抽象基类,需要使用abc模块,该模块定义了一个元类(ABCMeta) 和一组装饰器(@abs ...
- opencv摄像头读取图片
# 摄像头捕获图像或视频import numpy as np import cv2 # 创建相机的对象 cap = cv2.VideoCapture(0) while(True): # 读取相机所拍到 ...
- python3 推荐使用super调用base类方法
from:https://python3-cookbook.readthedocs.io/zh_CN/latest/c08/p07_calling_method_on_parent_class.htm ...
- c++ default关键字
PicServer() = default; ~PicServer() = default; CString 似乎也可以写出来, https://blog.csdn.net/a1875566250 ...