Vue-实现商品放大镜效果

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 = truethis.mouseMaskShow = true},mousemoveChange (i) {console.log('指针移动', i)//鼠标位置let x = i.offsetXlet y = i.offsetY//限制鼠标层罩，限制其无法超出原图区域左上角let topX = x - 100 < 0 ? 0 : x - 100let 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 = falsethis.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>

Vue-实现商品放大镜效果相关推荐

vue实现商品放大镜效果
前言一般电商类网页,如淘宝.京东,都会有商品主图实现放大镜效果的场景,今天来简单实现一个类似的放大镜功能效果展示当鼠标在主图上移动时,出现一个绿色的图片遮罩层,同时右侧出现一个大图预览区,用于展 ...
Vue中实现放大镜效果
先来看一下我们需要实现的效果是怎样的: 这里我们没有使用原生的 js 方法去实现, 而是使用的 Vue3 官方推荐的一个工具库 @vueuse/cor 中的 useMouseInElement 方法 ...
Vue实现电商网站商品放大镜效果
效果图各部分代码 HTML部分 <div id="goodsPics"><div id="imgPre&q ...
vue实现淘宝京东商品放大镜效果
实现原理: 两个盒子,通过映射来同步进行移动,达到移动放大镜的效果. 注意点: 遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积一定要是等比例的才行,严格控制样式效果图: 贴上代 ...
JS实现购物网站商品放大镜效果
一.需求说明 1.鼠标移入图片显示遮罩层和右边的放大镜鼠标移出图片隐藏遮罩层和右边的放大镜 2.鼠标经过下面的图片列表区切换显示的图片 3.鼠标在显示的图片上移动,遮罩层也会跟着移动,并 ...
Javascript手把手教你做商品放大镜效果
<!DOCTYPE html> <html><!--放大镜的原理是设置两张图片一张正常一张放大后的放大后的设为隐藏鼠标移入时候显示然后在正常那边有一个小框鼠标移动时 ...
用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能一.前言二.图示淘宝商品放大镜效果三.需要掌握的知识点四.放大镜实现原理五.放大镜代码及注释六.放大镜最终成果七.放大镜源码八.总结一.前言今天翻阅文件夹看到了之前写 ...
实现网页图片的放大镜效果
实现某东上面的商品放大镜效果实现代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...
仿京东PC网页商品详情的放大镜效果（原理+代码）
实现效果黑色只不过是转gif出问题而已准备工作 1. 访问该网址,理解我们要弄的放大镜效果,鼠标经过商品图片,显示一个黄色的放大选区,右边显示该选区的大图. 2. 获取商品图片和商品大图 [摩托罗 ...

Vue-实现商品放大镜效果

HTML:

js:

Vue-实现商品放大镜效果相关推荐

最新文章

热门文章