效果图

各部分代码

HTML部分

    <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><!--鼠标放大镜模块--><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>

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{/*CSS3给盒子:hover添加border时，盒子发生抖动的解决方案之一: 给盒子设置初始透明边框*/display: block;float: left;height: 54px;width: 54px;margin-left: 15px;border: 2px solid transparent
}
.imgNow li:hover, #sign{border: 2px solid red;
}#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;
}#seeDetail img{position: absolute;/*这里注意下，初始时候将查看框内待放大图的左上角定位与查看框的左顶点处，也即其定位原点处*/top: 0;left: 0;background-repeat: no-repeat;/*我自己的图片设置的宽高是450×450，所以这里放大部分的图片的宽高设置为原图的四倍*//*这个倍数需要注意，后面进行坐标变换的时候要用上*/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: 454px;position: absolute;top: 0;left: 0;z-index: 5;
}

js部分

export default {data(){return{url: require("@/pages/amusement/罗技鼠标广告2.jpg"),Bigurl: require("@/pages/amusement/罗技鼠标广告2.jpg"),//放大镜区域的图片资源//上面两个是初始值urlIndex: -1,//urlIndex用于在图片列表中isShow: 0,cursorMask:{transform:''},//使用CSS3控制原图上鼠标预览区域的移动imgMove:{transform:''},//使用CSS3控制放大镜区域图片的移动goodsImgs:[{id:0,src: require("@/pages/amusement/罗技鼠标广告2.jpg")},{id: 1,src: require("@/pages/amusement/罗技鼠标广告3.jpg")},{id: 2,src: require("@/pages/amusement/罗技鼠标广告4.jpg")},{id: 3,src: require("@/pages/amusement/罗技鼠标广告5.jpg")},{id: 4,src:require("@/pages/amusement/罗技鼠标广告1.jpg"),}]}},methods:{seeThis(index){this.url = this.goodsImgs[index].src;this.urlIndex = index;},move(e){/*  效果实现的核心，计算光标位置的坐标，通过修改鼠标预览区域的坐标来实现放大区域的移动*  注意这里使用的 offsetX 和 offsetY，是获取当前元素相对于其父元素的对应偏移量*/var x = e.offsetX - 75;var y = e.offsetY - 75;//放置鼠标预览区域移动到原图区域左边以外if(x<0){x = 0;}else if(x > 300){ //防止预览区域移动到右边以外//300 = 450 - 150x = 300;}if(y < 0){y = 0;}else if(y > 300){y = 300;}//使用模板字符串和变量拼接//这里注意: 根据实际上的效果，我们的预览区域左移时，放大镜查看区域的大图相当于等比例地右移，所以我们这里应当设置大图的移动方向与预览区相反，移动距离与预览区成比例//比例计算：放大倍数 = 大图所在div的宽高 / 原图所在div的宽高this.cursorMask.transform = `translate(${x}px, ${y}px)`;this.imgMove.transform = `translate(-${4*x}px, -${4*y}px)`;//向反方向成比例移动},seeBegin(e) {//move(e); 这里也可以不用this.Bigurl = this.url;this.isShow = 1;},seeEnd(){//鼠标移出原图区域时，清空相关信息this.Bigurl = "";this.left = 0;this.top = 0;this.isShow = 0;}},
}

总结

放大镜功能的核心实现思路就是两张图，一大一小，计算光标预览区域左上角的坐标，然后根据两张图所在div的对应宽高比，等比反方向移动大图，溢出部分设置overflow: hidden，从而实现放大镜的效果

需要的知识点：

在css3的实现方法中，可以使用transform: translate()，来设置图片的移动，此外还可以使用js获取标签进行对应属性的更改。
这里面主要是对pageX、pageY、offsetX、offsetY、offsetLeft、offsetTop、clientX、clientY等的区分使用

Vue实现电商网站商品放大镜效果相关推荐

电商网站商品模型之商品详情页设计方案 - 梦亦晓 - 博客园
电商网站商品模型之商品详情页设计方案 - 梦亦晓 - 博客园
商品sku算法php,笛卡尔乘积-电商网站商品sku组合算法应用
笛卡尔乘积是指在数学中,两个集合X和Y的笛卡尓积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员. 利用笛卡尔乘积 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
人气流量通通要！电商网站商品页设计超全面指南
编者按:今天这篇文章读完后,同学们可以来做一个小练习,根据文章,把优设看做一个电商网站,文章看做商品,来分析一下哪篇文章是热门,有哪些突出的方法,文章里藏有哪些引导用户的细节等等,即学即用,不容易忘, ...
小白学 Python 爬虫：Selenium 获取某大型电商网站商品信息
目标先介绍下我们本篇文章的目标,如图: 本篇文章计划获取商品的一些基本信息,如名称.商店.价格.是否自营.图片路径等等. 准备首先要确认自己本地已经安装好了 Selenium 包括 Chrome ...
电商网站商品模型之商品详情页设计方案
如下设计方案参考淘宝和华为商城 SKU SPU的关系 SPU = Standard Product Unit (标准产品单位) SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合, ...
电商详情页系统实战(2) -小型电商网站商品详情页的页面静态化架构及缺陷
商品详情页的系统架构 => 缓存架构 => 高并发 => 高可用电商网站里,大概可以说分成两种小型电商简单的一种架构方案,页面静态化的方案大型电商复杂的一套架构,大电商,国 ...
mysql表设计不同价格_电商网站商品详情页，要能选择商品属情如大小，颜色，型号等，对应不同价格，数据库应该如何设计？...
首先电商中的商品信息存储至少要2个表,第一张表:商品的基本信息,这个信息是在你刚进入商品详情页面看到的数据,而你选择了商品规格(尺码,颜色等),此时展示的商品信息为具体的商品下的规则信息,我们称之 ...
电商网站商品图片放大镜实现
2019独角兽企业重金招聘Python工程师标准>>> 提供两种实现方式. ① margin-left.margin-top方式实现. ②clip方式实现. 事件统一使用委托机制,即 ...

Vue实现电商网站商品放大镜效果

效果图

各部分代码

总结

Vue实现电商网站商品放大镜效果相关推荐

最新文章

热门文章