程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js图片查看器

js实现图片查看器

 更新时间：2022年07月14日 14:11:33   作者：hst?  
这篇文章主要为大家详细介绍了js实现图片查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

本文实例为大家分享了js实现图片查看器的具体代码，供大家参考，具体内容如下

1. 前言

网上已经有不少成熟的图片查看器插件，如果是单纯想要点击图片放大预览的话，可以直接使用插件。例如viewerjs

但是，当打开图片后还需要对图片进行一些像删除、下载、标记等业务层面上的操作，使用插件就显得不那么便捷，于是决定自己简单写个图片查看器

2. 设计思路

项目中用的是vue+iview，于是使用Modal弹窗组件做为播放器的盒子，考虑需要用到的基本功能有：
放大缩小、
监听鼠标滚轮放大缩小、
拖拽、
全屏查看、
查看上/下一张、
双击图片回到初始大小和初始位置

3. 完成效果

4. 代码思路

html部分：

<Modal
?? ?id="picture_viewer_modal"
?? ?v-model="visible"
?? ?:mask-closable = "false"
?? ?@on-cancel="cancel()"
?? ?footer-hide
?? ?width="70%"
?? ?:fullscreen="fullscreen"
>
?? ?<div class="wrap">
?? ??? ?<p class="num_tip">第 {{index+1}}/{{picArr.length}} 张</p>
?? ??? ?
?? ??? ?<!-- 查看图片的盒子 -->
?? ??? ?<div id="father" class="box">
?? ??? ? ? ?<img id="box" class="img_max img_auto" @dblclick="getDefault()" :src="http://9i0i.com/pic.php?p=row.src">
?? ??? ? ? ?<!-- 查看上一张 -->
?? ??? ? ? ?<span class="next_btn btn_left" @click="left()"></span>
?? ??? ? ? ?<!-- 查看下一张 -->
?? ??? ? ? ?<span class="next_btn btn_right" @click="right()"></span>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 按钮条 -->
?? ??? ?<div class="tool_bar">
?? ??? ? ? ?<!-- 裁剪 -->
?? ??? ? ? ?<span class="tool_btn btn_1" @click="cutPic()"></span>
?? ??? ? ? ?<!-- 全屏 -->
?? ??? ? ? ?<span class="tool_btn btn_2" @click="fullScreen()"></span>
?? ??? ? ? ?<!-- 放大 -->
?? ??? ? ? ?<span class="tool_btn btn_3" @click="big()"></span>
?? ??? ? ? ?<!-- 缩小 -->
?? ??? ? ? ?<span class="tool_btn btn_4" @click="small()"></span>
?? ??? ? ? ?<!-- 下载 -->
?? ??? ? ? ?<span class="tool_btn btn_5" @click="download()"></span>
?? ? ? ? ? <!-- 选中 -->
?? ? ? ? ? <span class="tool_btn btn_8" @click="choose()"></span>
?? ? ? ? ? <!-- 删除 -->
?? ? ? ? ? <span class="tool_btn btn_9" @click="del(row.id)"></span>
?? ? ? </div>
?? ?</div>
</Modal>

js部分：

props: {
? ? picList:Array,
? ? rowData:Object
},
data() {
? ? return {
? ? ?? ?//弹窗显隐
? ? ? ? visible: false,
? ? ? ? //当前查看的图片
? ? ? ? row: {},
? ? ? ? //当前查看的图片在数组中的位置
? ? ? ? index: 0,
? ? ? ? //所有图片
? ? ? ? picArr: [],
? ? ? ? //是否全屏
? ? ? ? fullscreen: false,
? ? };
},
watch: {
?? ?//监听弹窗打开事件
? ? modal(val) {
? ? ? ? this.visible = val;
? ? ? ? if(val){
? ? ? ? ? ? this.init();
? ? ? ? ? ? this.getObj();
? ? ? ? }
? ? },
},
mounted(){
? ? this.move();?
},
methods: {
? ? ?/**
? ? ?* 打开弹窗后，获取传入弹窗组件的数据
? ? ?*/
?? ? getObj(){
? ? ? ? ?this.row = this.rowData.row;
? ? ? ? ?this.index = this.rowData.index;
? ? ? ? ?this.picArr = this.picList;
? ? ?},
? ? ?/**
? ? ? * 初始化
? ? ? */
? ? ?init(){
? ? ? ? ?this.fullscreen = false;
? ? ? ? ?//重新打开后图片要重置回默认大小和居中
? ? ? ? ?this.getDefault();
? ? ?},
? ? ?/**
? ? ? * 双击图片恢复默认大小、位置
? ? ? */
? ? ?getDefault(){
? ? ? ? ?var image = document.getElementById("box");
? ? ? ? ?image.classList.add('img_max');
? ? ? ? ?image.classList.add('img_auto');
? ? ? ? ?box.style.left = '50%';
? ? ? ? ?box.style.top = '50%';
? ? ? ? ?box.style.transform = 'translate(-50%,-50%)';
? ? ?},
? ? ?/**
? ? ? * 拖拽移动
? ? ? */
? ? ?move(){
? ? ? ? ?var thiz = this;
? ? ? ? ?thiz.$nextTick(() => {
? ? ? ? ? ? ?var box = document.getElementById("box");
? ? ? ? ? ? ?var fa = document.getElementById('father');
? ? ? ? ? ? ?// 图片移动效果
? ? ? ? ? ? ?box.onmousedown=function(ev) {
? ? ? ? ? ? ? ? ?var oEvent = ev;
? ? ? ? ? ? ? ? ?// 浏览器有一些图片的默认事件,这里要阻止
? ? ? ? ? ? ? ? ?oEvent.preventDefault();
? ? ? ? ? ? ? ? ?var disX = oEvent.clientX - box.offsetLeft;
? ? ? ? ? ? ? ? ?var disY = oEvent.clientY - box.offsetTop;
? ? ? ? ? ? ? ? ?fa.onmousemove=function (ev) {
? ? ? ? ? ? ? ? ? ? ?oEvent = ev;
? ? ? ? ? ? ? ? ? ? ?oEvent.preventDefault();
? ? ? ? ? ? ? ? ? ? ?var x = oEvent.clientX - disX;
? ? ? ? ? ? ? ? ? ? ?var y = oEvent.clientY - disY;

? ? ? ? ? ? ? ? ? ? ?// 图形移动的边界判断
? ? ? ? ? ? ? ? ? ? ?// x = x <= 0 ? 0 : x;
? ? ? ? ? ? ? ? ? ? ?// x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
? ? ? ? ? ? ? ? ? ? ?// y = y <= 0 ? 0 : y;
? ? ? ? ? ? ? ? ? ? ?// y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
? ? ? ? ? ? ? ? ? ? ?box.style.left = x + 'px';
? ? ? ? ? ? ? ? ? ? ?box.style.top = y + 'px';
? ? ? ? ? ? ? ? ? ? ?//取消居中效果
? ? ? ? ? ? ? ? ? ? ?// box.style.transform = 'translate(0,0)';
? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ?// 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
? ? ? ? ? ? ? ? ?fa.onmouseleave = function () {
? ? ? ? ? ? ? ? ? ? ?fa.onmousemove = null;
? ? ? ? ? ? ? ? ? ? ?fa.onmouseup = null;
? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ?// 鼠标弹起后停止移动
? ? ? ? ? ? ? ? ?fa.onmouseup=function() {
? ? ? ? ? ? ? ? ? ? ?fa.onmousemove = null;
? ? ? ? ? ? ? ? ? ? ?fa.onmouseup = null;
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?}
? ? ? ? ? ? ?//监听鼠标滚轮放大缩小
? ? ? ? ? ? ?box.addEventListener("mousewheel", MouseWheelHandler, false);// IE9, Chrome, Safari, Opera
? ? ? ? ? ? ?box.addEventListener("DOMMouseScroll", MouseWheelHandler, false);// Firefox
? ? ? ? ? ? ?function MouseWheelHandler(e) {
? ? ? ? ? ? ? ? ?// cross-browser wheel delta ?
? ? ? ? ? ? ? ? ?var e = window.event || e; // old IE support ?
? ? ? ? ? ? ? ? ?var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//IE、Opera、Safari、Chrome ?e.wheelDelta,Firefox中 ?e.detail ?判断是向上还是向下滚动负值delta取-1 正值delta取1 ?
? ? ? ? ? ? ? ? ?box.height = Math.max(100, Math.min(2500, box.height + (50 * delta)));
? ? ? ? ? ? ? ? ?box.classList.remove('img_max');
? ? ? ? ? ? ? ? ?box.classList.remove('img_auto');
? ? ? ? ? ? ? ? ?return false;
? ? ? ? ? ? ?}
? ? ? ? ?});
? ? ?},
? ? ?/**
? ? ? * 全屏
? ? ? */
? ? ?fullScreen(){
? ? ??? ? //控制弹窗全屏
? ? ? ? ?this.fullscreen = !this.fullscreen;
? ? ? ? ?//图片恢复默认大小、位置
? ? ? ? ?this.getDefault();
? ? ?},
? ? ?/**
? ? ? * 放大
? ? ? */
? ? ?big(){
? ? ? ? ?var image = document.getElementById("box");
? ? ? ? ?if (image.height <= 2500) {
? ? ? ? ? ? ?image.height = image.height + 40;
? ? ? ? ?}
? ? ? ? ?image.classList.remove('img_max');
? ? ? ? ?image.classList.remove('img_auto');
? ? ?},
? ? ?/**
? ? ? * 缩小
? ? ? */
? ? ?small(){
? ? ? ? ?var image = document.getElementById("box");
? ? ? ? ?if (image.height > 100) {
? ? ? ? ? ? ?image.height = image.height - 40;
? ? ? ? ?}
? ? ? ? ?image.classList.remove('img_auto');
? ? ?},
? ? ?/**
? ? ? * 查看上一张
? ? ? */
? ? ?left(){
? ? ? ? ?var thiz = this;
? ? ? ? ?if(thiz.index == 0){
? ? ? ? ? ? ?//如果是第一张，则跳到最后一张
? ? ? ? ? ? ?thiz.index = thiz.picArr.length - 1;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}else{
? ? ? ? ? ? ?thiz.index = thiz.index - 1;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}
? ? ? ? ?//查看上下一张的时候，图片回到初始大小和位置，这里会闪烁，待优化
? ? ? ? ?this.getDefault();
? ? ?},
? ? ?/**
? ? ? * 查看下一张
? ? ? */
? ? ?right(){
? ? ? ? ?var thiz = this;
? ? ? ? ?if(thiz.index == thiz.picArr.length-1){
? ? ? ? ? ? ?//如果是最后一张，则跳到第一张
? ? ? ? ? ? ?thiz.index = 0;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}else{
? ? ? ? ? ? ?thiz.index = thiz.index + 1;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}
? ? ? ? ?//查看上下一张的时候，图片回到初始大小和位置，这里会闪烁，待优化
? ? ? ? ?this.getDefault();
? ? ?},
}

css部分：

//less
@pictureBg: #fff,
@pictureBorder: #fff,
@pictureCloseBg: #fff,
@pictureCloseBorder: #1A82FD,
@pictureClose: #1A82FD,
@pictureBtn1: url('?assets/map/view_image/icon_cut_blue.png')
@pictureBtn2: url('?assets/map/view_image/icon_move_blue.png')
@pictureBtn3: url('?assets/map/view_image/icon_zoom_blue.png')
@pictureBtn4: url('?assets/map/view_image/icon_reduce_blue.png')
@pictureBtn5: url('?assets/map/view_image/icon_download_blue.png')
@pictureBtn6: url('?assets/map/view_image/icon_play_blue.png')
@pictureBtn7: url('?assets/map/view_image/icon_video_blue.png')
@pictureBtn8: url('?assets/map/view_image/icon_chose_blue.png')
@pictureBtn9: url('?assets/map/view_image/icon_delete_blue.png')
@pictureBtnHov1: url('?assets/map/view_image/icon_cut_hov.png')
@pictureBtnHov2: url('?assets/map/view_image/icon_move_hov.png')
@pictureBtnHov3: url('?assets/map/view_image/icon_zoom_hov.png')
@pictureBtnHov4: url('?assets/map/view_image/icon_reduce_hov.png')
@pictureBtnHov5: url('?assets/map/view_image/icon_download_hov.png')
@pictureBtnHov6: url('?assets/map/view_image/icon_play_hov.png')
@pictureBtnHov7: url('?assets/map/view_image/icon_video_hov.png')
@pictureBtnHov8: url('?assets/map/view_image/icon_chose_hov.png')
@pictureBtnHov9: url('?assets/map/view_image/icon_delete_hov.png')
#picture_viewer_modal{
?? ?.ivu-modal{
?? ??? ?//覆盖modal关闭按钮样式
?? ? ? ?.ivu-modal-close{
?? ? ? ? ? ?right: -12px;
?? ? ? ? ? ?top: -12px;
?? ? ? ? ? ?border-radius: 100px;
?? ? ? ? ? ?background: @pictureCloseBg;
? ? ? ? ? ? border:1px solid @pictureCloseBorder;
?? ? ? ? ? ?.ivu-icon-ios-close{
?? ? ? ? ? ? ? ?font-size: 24px;
?? ? ? ? ? ? ? ?color: @pictureClose;
?? ? ? ? ? ?}
?? ? ? ?}
?? ? ? ?//覆盖modal弹窗盒子样式
?? ? ? ?.ivu-modal-content{
?? ? ? ??? ?background: @pictureBg;
? ? ? ? ? ? border:1px solid @pictureBorder;
?? ? ? ? ? ?border-radius: 0;
?? ? ? ? ? ?.ivu-modal-body{
?? ? ? ? ? ? ? ?height: 80vh;
?? ? ? ? ? ? ? ?padding: 35px 15px 0;
?? ? ? ? ? ? ? ?overflow: hidden;
?? ? ? ? ? ?}
?? ? ? ? ? ?
?? ? ? ? ? ?// 内容样式
?? ? ? ? ? ?.wrap{
?? ? ? ? ? ? ? ?height: 100%;
?? ? ? ? ? ? ? ?>.num_tip{
?? ? ? ? ? ? ? ??? ?color: @pictureClose;
?? ? ? ? ? ? ? ? ? ?position: absolute;
?? ? ? ? ? ? ? ? ? ?top: 10px;
?? ? ? ? ? ? ? ? ? ?left: 15px;
?? ? ? ? ? ? ? ? ? ?z-index: 9;
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?//图片盒子样式
?? ? ? ? ? ? ? ?>.box{
?? ? ? ? ? ? ? ? ? ?height: calc(100% - 20px - 1.2vw);
?? ? ? ? ? ? ? ? ? ?position: relative;
?? ? ? ? ? ? ? ? ? ?//展示的图片样式
?? ? ? ? ? ? ? ? ? ?>img{
?? ? ? ? ? ? ? ? ? ? ? ?position: absolute;
?? ? ? ? ? ? ? ? ? ? ? ?top: 50%;
?? ? ? ? ? ? ? ? ? ? ? ?left: 50%;
?? ? ? ? ? ? ? ? ? ? ? ?transform: translate(-50%, -50%);
?? ? ? ? ? ? ? ? ? ? ? ?cursor: move;
?? ? ? ? ? ? ? ? ? ? ? ?&.img_auto{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?width: auto;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?height: auto;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?&.img_max{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?max-height: 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?max-width: 100%;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?//上/下一张按钮样式
?? ? ? ? ? ? ? ? ? ?>.next_btn{
?? ? ? ? ? ? ? ? ? ? ? ?display: block;
?? ? ? ? ? ? ? ? ? ? ? ?width: 3vw;
?? ? ? ? ? ? ? ? ? ? ? ?height: 3vw;
?? ? ? ? ? ? ? ? ? ? ? ?position: absolute;
?? ? ? ? ? ? ? ? ? ? ? ?top: 50%;
?? ? ? ? ? ? ? ? ? ? ? ?margin-top: -1.5vw;
?? ? ? ? ? ? ? ? ? ? ? ?cursor: pointer;
?? ? ? ? ? ? ? ? ? ? ? ?transition: all 0.2s;
?? ? ? ? ? ? ? ? ? ? ? ?&.btn_left{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?left: 6px;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('?../assets/map/view_image/btn_left.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?&:hover{
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('?../assets/map/view_image/btn_left_hov.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?&.btn_right{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?right: 6px;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('?../assets/map/view_image/btn_right.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?&:hover{
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('?../assets/map/view_image/btn_right_hov.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ??
?? ? ? ? ? ? ?? ?//底部工具条样式
?? ? ? ? ? ? ? ?>.tool_bar{
?? ? ? ? ? ? ? ? ? ?text-align: center;
?? ? ? ? ? ? ? ? ? ?font-size: 0;
?? ? ? ? ? ? ? ? ? ?position: relative;
?? ? ? ? ? ? ? ? ? ?z-index: 9;
?? ? ? ? ? ? ? ? ? ?.tool_btn{
?? ? ? ? ? ? ? ? ? ? ? ?font-size: 12px;
?? ? ? ? ? ? ? ? ? ? ? ?display: inline-block;
?? ? ? ? ? ? ? ? ? ? ? ?width: 1.2vw;
?? ? ? ? ? ? ? ? ? ? ? ?height: 1.2vw;
?? ? ? ? ? ? ? ? ? ? ? ?margin: 10px 0.8vw;
?? ? ? ? ? ? ? ? ? ? ? ?transition: all 0.2s;
?? ? ? ? ? ? ? ? ? ? ? ?cursor: pointer;
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?.btn_1{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn1 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov1 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_2{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn2 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov2 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_3{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn3 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov3 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_4{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn4 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov4 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_5{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn5 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov5 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_6{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn6 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov6 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_7{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn7 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov7 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_8{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn8 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov8 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_9{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn9 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov9 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?
?? ? ? ?//弹窗全屏样式
?? ? ? ?&.ivu-modal-fullscreen{
?? ? ? ? ? ?.ivu-modal-close{
?? ? ? ? ? ? ? ?right: 0;
?? ? ? ? ? ? ? ?top: 0;
?? ? ? ? ? ?}
?? ? ? ? ? ?.ivu-modal-content{
?? ? ? ? ? ? ? ?.ivu-modal-body{
?? ? ? ? ? ? ? ? ? ?height: 100vh;
?? ? ? ? ? ? ? ? ? ?overflow: hidden;
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com