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() ...
随机推荐
- Bootstrap 结合 PHP ,做简单的登录以及注册界面及功能
登录实现 HTML代码 <div class="container"> <?php if (isset($error_msg)): ?> <div c ...
- ROMTableAddr = 0xE00FF003 错误 Target DLL has been cancelled 错误
JTAG下载固件错误 keil下载固件错误 如下错误 * JLink Info: Found SWD-DP with ID 0x1BA01477 * JLink Info: Found SWD-DP ...
- 一个时间O(n)的洗牌算法
//一种O(n)的洗牌算法 vector<int> randNUms(vector<int> &nums, int m) { int len = nums.size() ...
- 初始化构建React+Ts项目时出现:Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
具体错误 ERROR in ./src/index.tsx Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssS ...
- （Linux基础学习）第四章：Linux系统中的日期和时间介绍和ntpdate命令
第1节:日期和时间1.Linux的两种时钟:系统时钟:由Linux内核通过CPU的工作频率进行的硬件时钟:主板2.相关命令date 显示和设置系统时间hwclock,clock 显示硬件时钟-s,-- ...
- Spring -11 -单例设计模式 -懒汉式/饿汉式(idea默认的)
单例设计模式 作用: 在应用程序有保证最多只能有一个实例. 好处: 2.1 提升运行效率. 2.2 实现数据共享. 案例:application 对象 懒汉式 3.1 对象只有被调用时才去创建. 3. ...
- Python通过lxml库遍历xml通过xpath查询（标签，属性名称，属性值，标签对属性）
xml实例: 版本一: <?xml version="1.0" encoding="UTF-8"?><country name="c ...
- mysql占用内存过高调优方法
最近测试一个站点,用mysql 5.6+mencache 内存16GB,但是进行查询的时候还是导致CPU占用过高,达到80%左右,所以想办法如何进行调优.以下几个参数进行参考选择 优化mysql数据 ...
- 大马过安全狗拿webshell方法
很多拿站的朋友,都知道大马很多都会被安全狗拦截,最近一个大牛给我一个方法,竟然成功,所以分享下这个方法. 将大马写到一个txt文件里面,命名为dama.txt,再建一个文本文档,asp的就写入:< ...
- 「AHOI / HNOI2017」礼物
「AHOI / HNOI2017」礼物 题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自己,一个送给她.每个手环上各有 n 个装饰物,并且每个装饰 ...