この記事の参照先: https://blog.csdn.net/liushi21/article/details/127497487
効果は次のとおりです。
関数の実装は次のように分類されます。
(1) 商品マップエリア: 主に写真を閲覧し、写真の URL に従って写真を表示します。「虫眼鏡エリア」は、マウスがこのエリアから離れた場合には表示する必要はありません。
(2) マウスでブロックを拡大します。主に次の 2 つのことを扱います。
1)mouseenter: マウスが入力されると、虫眼鏡エリアに URL に従って画像が表示されます。
2)mousemove:マウスが動くと、マウスのマスクブロック領域も連動して移動し、同時に虫眼鏡領域の絵もそれに応じて切り替わります(マスクブロックの拡大効果を表示します)
(3) 商品マップ概要:マウスオーバーすると商品マップエリアのURL画像が切り替わります。
ズーム効果を実現する方法:
主にCSSのtranslateメソッドによって実現されます。
実際には虫眼鏡エリアに大きな写真があり、製品写真エリア内でマウスを移動すると、虫眼鏡エリアの大きな写真が互いに近づいていきます。
コード:
1.CSSコード:
#page{
position: relative;
height: 700px;
width: 1246px;
left: 19.3%;
top: 111px;
background-color: aqua;
}
/* 商品图 */
#goodsPics{
width: 452px;
height: 626px;
background-color: blue;
position: relative;
top: 10px;
}
/*当前所查看的图片,也即所需要局部放大查看的图片*/
.imgNow{
position: relative;
top: 15px;
left: 37px;
}
.imgNow li{
display: block;
float: left;
height: 54px;
width: 54px;
margin-left: 15px;
border: 2px solid transparent;
}
.imgNow li:hover, #sign{
border: 2px solid red;
}
/* 图片放大后的div区块 */
#seeDetail{
position: absolute;
background-color: aliceblue;
width: 600px;
height: 600px;
top: 0%;
left: 101%;
overflow: hidden;
border: 2px solid #f90;
background-position: 0 0;
background-repeat: no-repeat;
}
/* 图片放大后的div区块下的img区块 */
#seeDetail img{
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
width: 1800px;
height: 1800px;
}
/* 鼠标查看区域 */
.move{
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 150px;
cursor: move;
background: rgba(142, 223, 255, 0.407);
}
/* 覆盖在放大图的原图表面上的一个遮罩层 */
.topMask{
width: 452px;
height: 452px;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
2、home.vue代码:
<script>
export default{
data(){
return{
url: require('@/assets/images/01.jpg'),
Bigurl: require('@/assets/images/01.jpg'),
urlIndex: -1, //urlIndex用于图片列表中
isShow: 0,
cursorMask: {transform: ''},
imgMove: {transform: ''},
goodsImgs: [
{
id:0,
src: require('@/assets/images/01.jpg')
},{
id:1,
src: require('@/assets/images/02.jpg')
},{
id:2,
src: require('@/assets/images/03.jpg')
}
]
}
},
methods: {
seeThis(index){
this.url = this.goodsImgs[index].src;
this.urlIndex = index;
},
move(e){
var x = e.offsetX - 75;
var y = e.offsetY - 75;
// 防止鼠标预览区域移动到原图区域左边以外
if(x < 0){
x = 0;
}else if(x > 300){
// 防止预览区域移动到右边以外
x = 300;
}
if(y < 0){
y = 0;
}else if(y > 300){
y = 300;
}
this.cursorMask.transform = `translate(${x}px, ${y}px)`;
this.imgMove.transform = `translate(-${4*x}px, -${4*y}px)`;
},
seeBegin(){
this.Bigurl = this.url;
this.isShow = 1;
},
seeEnd(){
this.Bigurl = "";
this.left = 0;
this.top = 0;
this.isShow = 0;
}
}
}
</script>
<template>
<div id="goodsPics">
<!-- 当前查看商品图区域 -->
<div id="imgPre" style="position: relative;" @mouseleave="seeEnd">
<div ref="imgPre">
<img :src="url" alt="picNow">
</div>
<div class="topMask" @mouseenter="seeBegin($event)" @mousemove="move($event)">
<!-- 鼠标放大镜模块 -->
<div ref="move" v-show="isShow" class="move" :style="cursorMask">
</div>
</div>
<!-- 商品图总览,就是一排的小图 -->
<ul class="imgNow">
<li v-for="(item, index) in goodsImgs" :key="item.id" @mouseover="seeThis(index)" :id="urlIndex == index ? sign : ''">
<img style="width: 54px; height: 54px;" :src="item.src" alt="pics">
</li>
</ul>
<!-- 放大镜区域,查看商品图放大后的效果 -->
<div v-if="isShow" id="seeDetail" ref="bigImg">
<img :src="Bigurl" alt="" :style="imgMove">
</div>
</div>
</div>
</template>
<style scoped>
</style>