用H5实现四宫格切换九宫格,再切换十六宫格

废话不多说,直接上代码
效果图如下
点击右上角按钮,即可切换4宫格,9宫格,16宫格

html部分

 <!-- 切换按钮 --><div class="center"><div id="video"><label class="label1"><input type="radio" class="one" value=4 v-model="isActive"/><div class="option1"></div></label><label class="label2"><input type="radio" class="four" value=9 v-model="isActive"/><div class="option2"></div></label><label class="label3"><input type="radio" class="nine" value=16 v-model="isActive"/><div class="option3"></div></label><h1>{{isActive}}</h1><!--图片切换--><div class="main2"><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><!-- <img :src="selectImg?selectImg:require('../../assets/videoSurveillance/1.png')" alt=""> --><img src='../../assets/videoSurveillance/1.png' alt=""></div><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><img src="../../assets/videoSurveillance/2.png" alt=""></div><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><img src="../../assets/videoSurveillance/3.png" alt=""></div><div v-bind:class="[isActive == 4 ? 'quarter-div': '',isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '', 'yellow']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9':'']"><img src="../../assets/videoSurveillance/1.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9':'']"><img src="../../assets/videoSurveillance/2.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9':'']"><img src="../../assets/videoSurveillance/3.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 9 || isActive == 16" v-bind:class="[isActive == 9 ? 'quarter-div4': '',isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/1.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div><div v-show="isActive == 16" v-bind:class="[isActive == 16 ? 'quarter-div9': '']"><img src="../../assets/videoSurveillance/4.png" alt=""></div></div></div></div>

css部分

    .center{width: 14.7rem;height: 8.4rem;position: relative;margin-top: 0.8rem;margin-left: 0.3rem;}/* #video{width: 100%;height: 100%;} */.center div{object-fit: initial;}.center .mains {width: 100%;height: 100%;position: absolute;}#video p input{position: absolute;top: -.56rem;right: 1.52rem;/* width: .5rem;height: .5rem; */}#video .four{position: absolute;top: -.56rem;right: .80rem;background: url('../../assets/videoSurveillance/four.png') no-repeat 100%!important;background-size:.50rem .50rem; }#video .nine{position: absolute;top: -.56rem;right: 0.06rem;}.center .main2 {width: 100%;height: 100%;position: absolute;top: 0;}.center .quarter-div9 {width: 25%;height: 25%;float: left;}.center .quarter-div4 {width: 33.33%;height: 33.33%;float: left;}.center .quarter-div {float: left;width: 50%;height: 50%;}#video .main2 div img{width: 100%;height: 100%;}/* 修改input样式 */#video .label1 {position: absolute;width: .70rem;height: .58rem;top: -.60rem;right: 1.25rem;width: .36rem;height: .36rem;}#video .label2 {position: absolute;width: .70rem;height: .58rem;top: -.60rem;right: .67rem;width: .36rem;height: .36rem;}#video .label3 {position: absolute;width: .70rem;height: .58rem;top: -.60rem;right: .06rem;width: .36rem;height: .36rem;}/* 第一个按钮图片 */#video .option1 {width: .36rem;height: .36rem;position: absolute;top: .10rem;left: 0rem;background-size: cover;background: url('../../assets/videoSurveillance/four.png') no-repeat;background-size: cover;}#video .one[type="radio"] {display: inline-block;margin-right: -0.03rem;opacity: 0;width: .36rem;height: .36rem;}#video .one[type="radio"]:checked+.option1 {background: url('../../assets/videoSurveillance/four.png') no-repeat;background-size: cover;}/* 第二个按钮图片 */#video .option2 {width: .36rem;height: .36rem;position: absolute;top: .10rem;left: 0rem;background-size: cover;background: url('../../assets/videoSurveillance/six.png') no-repeat;background-size: cover;}#video .four[type="radio"] {display: inline-block;margin-right: -.03rem;opacity: 0;width: .36rem;height: .36rem;}#video .four[type="radio"]:checked+.option2 {background: url('../../assets/videoSurveillance/six.png') no-repeat;background-size: cover;}/* 第三个按钮图片 */#video .option3 {width: .36rem;height: .36rem;position: absolute;top: .10rem;left: 0rem;background-size: cover;background: url('../../assets/videoSurveillance/nine.png') no-repeat;background-size: cover;}#video .nine[type="radio"] {display: inline-block;margin-right: -0.03rem;opacity: 0;width: .36rem;height: .36rem;}#video .nine[type="radio"]:checked+.option3 {background: url('../../assets/videoSurveillance/nine.png') no-repeat;background-size: cover;}

js部分

export default {// el: '#video',// data: {isActive : 1},name: "videoSurveillance",data() {return {}}```

用H5实现四宫格切换九宫格,再切换十六宫格相关推荐

汉（海）明码 | “十六宫格法” 破解汉（海）明码相关题目（附软考经典例题）
文章目录一.前言二.奇偶校验码三.海明码概念四.十六宫格法 1.概述 2.原理 3.填写校验位 4.填写数据位 5.填写十六宫格首位五.结语一.前言很多小伙伴在遇到"汉明码&q ...
十六宫格拼图（A*/IDA*）（曼哈顿距离）
传送门迭代加深:通过单纯的深度优先搜索无法找出初始状态到最终状态的最短路径,但是重复进行限制最大深度的深度优先搜索(深度受限搜索)却可以.简单来说,就是在循环执行深度受限搜索的过程中逐步增加限制值l ...
IDA*算法解十六宫格拼图问题
IDA*算法, ID(Iterative Deepening)指的是迭代加深. 它的思想是重复进行限制最大深度的深度优先搜索(此限制从某个最小值遍历到最大值), 也称为深度受限搜索. 一般情况下, 为 ...
MFC Windows 程序设计[二十五]之五彩十六宫格(附源码)
MFC Windows 程序设计[二十五]之五彩十六宫格程序之美前言主体运行效果核心代码逻辑分析结束语程序之美前言 MFC是微软公司提供的一个类库(class libraries), ...
MFC Windows 程序设计[三十五]之五彩十六宫格
MFC Windows 程序设计[三十五]之五彩十六宫格程序之美前言主体运行效果核心代码逻辑分析结束语程序之美前言 MFC是微软公司提供的一个类库(class libraries), ...
今有兽，六首四足；禽，四首二足，上有七十六首，下有四十六足。问：禽、兽各几何？...
根据题目描述,兽有六首四足,禽有四首二足,上面有七十六首,下面有四十六足.根据题意,兽和禽的数量可以用首数和足数来确定. 首数为76,足数为46,先用首数来算: 76首/6首=12.67个,可知兽有1 ...
vue 1 2 3 4 6 9 16宫格 6宫格（六宫格） 9宫格（九宫格） 16宫格（十六宫格）自定义宫格(样式篇)
直接上图把,如果是你的菜,就点个赞,谢谢. 目录: 我直接在app.vue组件写了.. <template><div class="cell"><di ...
Python拼图游戏源代码，可定制拼图图片，支持多种难度，可九宫格、十六宫格、二十五宫格
配置环境安装pygame模块 pip install pygame 引入资源将照片,添加到resources/pictures路径下照片.jpg格式主函数代码 pintu.py 一个配置文件c ...
冥王十二宫篇主题曲地球仪铃声冥王十二宫篇主题曲地球仪手机...
链接:http://www.baidushifen.cn/mp3/69.html 来自 " ITPUB博客 " ,链接:http://blog.itpub.net/14463458 ...

用H5实现四宫格切换九宫格,再切换十六宫格

html部分

css部分

js部分

用H5实现四宫格切换九宫格,再切换十六宫格相关推荐

最新文章

热门文章