功能介绍
在做后台时组件图片预览功能,这个图片放大缩小感觉有点意思,自己就写了一个简易小demo。
下面是制作完毕的视频(样式随便写了写有点丑不要介意)
暂时只有放大缩小功能
实现思路
目前有两个方向实现
1)通过css transform:scale(1); 控制图片的缩放比实现放大缩小功能。
但是弊端是只能根据你自己设定的宽度去缩放。下面是实现代码:
<div class="previewImage">
<!--图片父元素,再此添加溢出隐藏-->
<p class="show" v-show="display">{{ percentage + "%" }}</p>
<p class="hint" v-show="status == 1">不能再放大了!</p>
<p class="hint" v-show="status == 2">不能再缩小了!</p>
<div class="Exhibition" :style="{ transform: `scale(${w}, ${h})` }" v-for="item in ImgList"
:key="item.id"
v-show="
preViewID == item.id ? (item.switch = true) : (item.switch = false)
"><!--这里循环的是放置图片的数组-->
<img
:src="item.img"
alt=""
/>
</div>
</div>
<!-- 导航图标 (这里我用的本地图片你们可以切换为网络图片测试)-->
<div class="BigNav">
<img src="../assets/u120.png" @click="change(true)" alt="" /><!--加号-->
<img
src="../assets/u110.png"
@click="change(false)"
alt=""
/><!--减号-->
<img src="../assets/u100.png" alt="" />
<img src="../assets/u190.png" alt="" />
<img src="../assets/u170.png" alt="" />
<img src="../assets/u160.png" alt="" />
<img src="../assets/u150.png" alt="" />
<img src="../assets/u200.png" alt="" />
<img src="../assets/u180.png" alt="" />
<img src="../assets/u130.png" alt="" />
<img src="../assets/u140.png" alt="" />
</div>
js部分
const ImgList = ref([
{
img: "https://www.helloimg.com/images/2022/06/22/ZnxrhX.png",
id: "1",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/04/11/LVnutK.jpg",
id: "2",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/04/11/LVpkVJ.png",
id: "3",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/04/11/LVnutK.jpg",
id: "4",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/06/23/jPCkOs.png",
id: "5",
switch: false,
},
{
img: "https://s1.ax1x.com/2022/06/23/jPZRyT.png",
id: "6",
switch: false,
},
]); //图片数组
// 加减改变时 每次
let timeout;
const change = (state) => {
timeout && clearTimeout(timeout);
display.value = true;
if (state) {
percentage.value += 0.1 * 100;//计算百分比
w.value += 0.1;
h.value += 0.1;
} else {
if (percentage.value > 50) {
percentage.value -= 0.1 * 100;
w.value -= 0.1;
h.value -= 0.1;
} else {
status.value = 2;
}
}
timeout = setTimeout(() => {
status.value = 0;
display.value = false;
}, 500);
};
// 鼠标滚动监听
function handleScroll() {
window.addEventListener("mousewheel", (e) => {
var delta = 0;
if (!e) e = window.event;
if (e.wheelDelta) {
//IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
delta = e.wheelDelta / 120;
if (window.opener) delta = -delta; //因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
} else if (e.detail) {
//FF浏览器使用的是detail,其值为“正负3”
delta = -e.detail / 3;
}
// if (delta) handle(delta);
// console.log(e);
let direction = delta < 0 ? false : true; //true是向上
change(direction);
});
}
css部分就把父级设置宽高图片自适应就可以
其他方案实现请查看下一篇vue3 预览图片放大缩小功能百分比输出+鼠标滚动事件放大缩小(2)