PC端逛淘宝点进商品详情,鼠标挪到图片上右侧可见鼠标所到处细节放大,现在来掰扯掰扯↓↓↓↓↓↓
效果图:
步骤解析:
1、创建一个大盒子,里面放左右两个大小相同的盒子
2、左边放入图片、鼠标遮罩层和图片遮罩层,右边放入图片
3、写样式,左边:图片遮罩层和图片大小一样大,右边:图片给其大小超过左边图片,超出右边容器的部分隐藏,具体样式见底部
4、功能实现
HTML:
js:
代码自提处:
js:
<script>
export default {
name: 'TheHome',
data () {
return {
mouseMaskShow: false,
imgMaskShow: false,
mouseMove: { transform: ''},
imgMove: {}
}
},
methods: {
mouseenterChange () {
this.imgMaskShow = true
this.mouseMaskShow = true
},
mousemoveChange (i) {
console.log('指针移动', i)
//鼠标位置
let x = i.offsetX
let y = i.offsetY
//限制鼠标层罩,限制其无法超出原图区域左上角
let topX = x - 100 < 0 ? 0 : x - 100
let topY = y - 100 < 0 ? 0 : y - 100
//限制鼠标层罩,限制其无法超出原图区域
if (topX > 600) {
topX = 600
}
if (topY > 400) {
topY = 400
}
//通过tranform移动鼠标层罩和右侧图片位置
this.mouseMove.transform = `translate(${topX}px,${topY}px)`
this.imgMove.transform = `translate(-${0.5 * topX}px,-${0.7 * topY}px)`
},
mouseoutChange () {
this.imgMaskShow = false
this.mouseMaskShow = false
}
}
}
</script>
css:
<style scoped lang="scss">
.the-home-container {
.the-home-container-box-one {
display: flex;
height: 100%;
width: 100%;
.the-home-left {
margin-right: 8px;
width: 600px;
height: 400px;
border: 1px solid teal;
.image-style {
width: 600px;
height: 400px;
}
.mouse-mask {
width: 100px;
height: 100px;
background: rgba(158, 57, 48, 0.5);
position: absolute;
top: 8px;
left: 8px;
}
.image-box-mask {
width: 600px;
height: 400px;
position: absolute;
z-index: 1;
top: 8px;
left: 8px;
}
}
.the-home-right {
margin-right: 8px;
width: 600px;
height: 400px;
border: 1px solid pink;
position: relative;
overflow: hidden;
.image-size-style {
width: 1000px;
height: 600px;
position: absolute;
top: 0;
left: 0;
}
}
}
.the-home-container-box-two {
width: 500px;
height: 300px;
}
}
</style>