<template>
<div>
<div class="Back">
<img v-for="(item, index) in ImgList" :key="item.id" :src="item.img" alt="" ref="mask"
@click="maskImg(item, index)" style="width: 100px; height: 100px" />
</div>
<div class="preView" v-if="HideImg">
<!-- 关闭按钮 -->
<div class="closeBlock" @click="ClosePreviess" v-show="enlargeImG">
<img src="../assets/chose.png" alt="" />
</div>
<!-- 预览图片 -->
<div
:class="
enlargeStatus == 1
? 'previewimages'
: enlargeStatus == 0
? 'previewImage'
: ''
"
>
<div :class="gray==1?'Exhibition':'pig'" v-for="item in ImgList" :key="item.id">
<img :src="item.img" alt="" :style="styleImg" ref="imagePig" class="imge" @mousedown="move"
v-if="preViewID == item.id? (item.switch = true) : (item.switch = false)
" />
</div>
</div>
<!-- 导航图标 -->
<div class="BigNav" v-show="enlargeImG">
<img src="../assets/u120.png" alt="" />
<img src="../assets/u110.png" alt="" />
<img src="../assets/u100.png" @click="magnify" alt="" />
<img src="../assets/u190.png" @click="restore" alt="" />
<img src="../assets/u170.png" alt="" @click="pageUp" />
<img src="../assets/u160.png" alt="" @click="RotatePictures" />
<img src="../assets/u150.png" alt="" @click="nextPage" />
<img src="../assets/u200.png" alt="" @click="rotate_left" />
<img src="../assets/u180.png" alt="" @click="rotates_right" />
<img src="../assets/u130.png" alt="" @click="rotate_mirror" />
<img src="../assets/u140.png" alt="" @click="rotate_mirrors" />
</div>
<!-- 底部小图片 -->
<div class="inpuileImg" v-show="enlargeImG">
<img
v-for="(item, index) in ImgList"
:key="item.id"
:src="item.img"
:class="preViewIndex == index ? 'inpuile' : 'mask_img'"
@click="preViewImg(item, index)"
/>
</div>
</div>
</div>
</template>
<script>
import screenfull from "screenfull";
import { ref, onMounted, markRaw } from "vue";
import { CLOSING } from "ws";
export default {
name: "HomeView",
components: {
// HelloWorld
},
setup() {
const sil = ref(null);
const mask = ref(null);
const enlargeImG = ref(true);
const enlargeStatus = ref(0);
const ImgList = ref([
{
img: "https://s1.ax1x.com/2022/06/14/XIirHf.png",
id: "1",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/06/23/j9vVHO.jpg",
id: "2",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/06/23/j9vmUe.jpg",
id: "3",
switch: false,
},
{
img: "https://www.helloimg.com/images/2022/06/22/ZnxrhX.png",
id: "4",
switch: false,
},
]);
const isFullscreen = ref(false);
const PreviousImgList = ref([]);
const sizeMess=ref([]);
const quanp = ref(0);
// 判断点击状态值
const preViewIndex = ref(0);
// 判断点击显示隐藏状态值
const preViewID = ref(0);
onMounted(() => {
screenfull.on("change", change);
});
// 显示隐藏值
const HideImg = ref(false);
// 点击图片数组开始预览
const maskImg = (item, i) => {
styleImg.value = null;
HideImg.value = true;
preViewID.value = item.id;
preViewIndex.value = i;
};
// 点击底部小图片
const preViewImg = (item, i) => {
preViewIndex.value = i;
preViewID.value = item.id;
gray.value=1
styleImg.value=null
};
// 关闭按钮
const ClosePreviess = () => {
if (enlargeStatus.value == 1) {
enlargeStatus.value = 0;
enlargeImG.value = true;
} else {
HideImg.value = false;
}
};
// 上一张
const pageUp = () => {
styleImg.value=null
if (preViewID.value == ImgList.value[0].id) {
let i = ImgList.value.length-1
preViewID.value = ImgList.value[i].id
} else {
preViewID.value--;
preViewIndex.value--;
}
};
// 下一张
const nextPage = () => {
styleImg.value=null
if (preViewID.value < ImgList.value.length) {
preViewID.value++;
preViewIndex.value++;
} else if (preViewID.value >= ImgList.value.length) {
preViewID.value = ImgList.value[0].id;
preViewIndex.value = 0;
}
};
var clearsetI = ref(null);
//轮播图片
const RotatePictures = () => {
screenfull.toggle();
};
document.onkeyup = (e) => {
if (HideImg.value == true) {
if (e.keyCode == 37) {
styleImg.value=null
if (preViewID.value == ImgList.value[0].id) {
let i = ImgList.value.length-1;
preViewID.value = ImgList.value[i].id
} else {
preViewID.value--;
preViewIndex.value--;
}
} else if (e.keyCode == 39) {
styleImg.value=null
if (preViewID.value < ImgList.value.length) {
preViewID.value++;
preViewIndex.value++;
} else if (preViewID.value >= ImgList.value.length) {
preViewID.value = ImgList.value[0].id;
preViewIndex.value = 0;
}
}
}
};
const change = () => {
isFullscreen.value = screenfull.isFullscreen;
if (isFullscreen.value == true) {
quanp.value = 1;
enlargeStatus.value = 1;
enlargeImG.value = false;
clearsetI.value = setInterval(() => {
if (preViewID.value < ImgList.value.length) {
preViewID.value++;
preViewIndex.value++;
} else if (preViewID.value >= ImgList.value.length) {
preViewID.value = ImgList.value[0].id;
preViewIndex.value = 0;
}
}, 3000);
} else if (isFullscreen.value == false) {
enlargeStatus.value = 0;
enlargeImG.value = true;
clearInterval(clearsetI.value);
}
};
// 旋转
const styleImg = ref(null);
// 逆时针旋转
const deg = ref(0);
const rotate_left = () => {
if (degs.value != 0) {
degs.value -= 90;
styleImg.value = `transform:rotateZ(${degs.value}deg);transition:0.5s; `;
} else if (degs.value == 0) {
deg.value += 90;
styleImg.value = `transform:rotateZ(${-deg.value}deg);transition:0.5s; `;
}
};
// 正时针旋转
const degs = ref(0);
const rotates_right = () => {
if (deg.value != 0) {
deg.value -= 90;
styleImg.value = `transform:rotateZ(${-deg.value}deg);transition:0.5s; `;
} else if (deg.value == 0) {
degs.value += 90;
styleImg.value = `transform:rotateZ(${degs.value}deg);transition:0.5s; `;
}
};
// 左右
const deg_mirror = ref(0);
const rotate_mirror = () => {
deg_mirror.value += 180;
styleImg.value = `transform:rotateY(${deg_mirror.value}deg);transition:0.5s`;
};
// 上下
const deg_mirrors = ref(0);
const rotate_mirrors = () => {
deg_mirrors.value += 180;
styleImg.value = `transform:rotateX(${-deg_mirrors.value}deg);transition:0.5s`;
};
// 鼠标拖拽
const move = function(e) {
e.preventDefault();
// 获取元素
var left = document.querySelector(".preView");
var img = document.querySelector(".imge");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 添加鼠标移动事件
left.addEventListener("mousemove", move);
function move(e) {
img.style.left = e.pageX - x + "px";
img.style.top = e.pageY - y + "px";
}
// 添加鼠标抬起事件,鼠标抬起,将事件移除
img.addEventListener("mouseup", function() {
left.removeEventListener("mousemove", move);
});
// 鼠标离开父级元素,把事件移除
left.addEventListener("mouseout", function() {
left.removeEventListener("mousemove", move);
});
}
const gray=ref(1);
const magnify=function(){
if(gray.value==1){
gray.value=2
}else{
gray.value=1
}
var img_url = document.querySelector('.imge').src
var img = new Image();
img.src = img_url;
let size=[img.width,img.height]
sizeMess.value=size
console.log(img.width);
}
const restore=function(){
gray.value=1
}
return {
gray,
sizeMess,
restore,
magnify,
move,
change,
clearsetI,
quanp,
isFullscreen,
enlargeStatus,
enlargeImG,
RotatePictures,
nextPage,
pageUp,
PreviousImgList,
HideImg,
markRaw,
ClosePreviess,
preViewID,
preViewIndex,
preViewImg,
CLOSING,
maskImg,
mask,
ImgList,
sil,
deg,
rotate_left,
styleImg,
rotates_right,
degs,
rotate_mirror,
deg_mirror,
rotate_mirrors,
deg_mirrors,
};
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
user-select: none;
}
.Exhibition {
width: 70%;
height: 70%;
margin-top: 5%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.pig {
width: 100%;
height: 100%;
margin-top: 5%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.Exhibition img {
position: absolute;
max-width: 90%;
max-height: 90%;
cursor: move;
z-index: 99;
}
.pig img {
position: absolute;
transform: scale(2);
cursor: move;
z-index: 99;
}
.preView {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(127, 127, 127, 0.6);
top: 0;
}
.inpuileImg {
width: 100%;
height: 15%;
background-color: #3f3f3f;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
z-index: 999;
}
.mask_img {
width: 8%;
height: 95%;
margin-left: 1%;
position: relative;
filter: grayscale(80%);
}
.inpuileImg .mask_img:hover {
filter: grayscale(20%);
}
.inpuile {
width: 8%;
height: 95%;
margin-left: 1%;
position: relative;
}
.BigNav {
width: 100%;
height: 10%;
position: absolute;
bottom: 15%;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.BigNav img {
width: 5%;
height: 90%;
margin-left: 1%;
}
.closeBlock {
width: 50px;
height: 50px;
background-color: #3f3f3f;
position: absolute;
right: 0;
border-radius: 0px 0px 0px 40px;
display: flex;
justify-content: center;
align-items: center;
}
.closeBlock img {
position: absolute;
margin-top: -10%;
margin-left: 10%;
color: #fafafa;
}
.closeBlock:hover {
background-color: #fb5430;
cursor: pointer;
}
.previewImage {
width: 100%;
height: 65%;
margin-top: 2%;
display: flex;
justify-content: center;
align-items: center;
}
.Previous {
width: 15%;
height: 100%;
}
.previewimages {
width: 100%;
height: 92%;
margin-top: 2%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
图片拖拽、预览、翻转
于 2022-07-23 12:32:59 首次发布