简单的电商商品详情图片放大镜（vue）

电商平台常常出现的鼠标移动到商品上面，放大商品图片查看商品细节，其实就是一个鼠标跟随事件的应用。

一、从服务器先获取图片：本次获取图片是从父组件传过来的

服务器请求回来的数据结构如下：一个数组包含多个对象，图片在对象里

props 接收父组件传过来的图片，并对传过来的图片进行了简单处理

<script>
export default {name:"Zoom",props:["skuImageList"],computed:{// 当服务器的数据没有回来的时候父组件传过来 skuImageList 的是一个空数组// 空数组 [0] 就会 undefined 报错，  imgObj(){return this.skuImageList[0] || {}}}
}
</script>

二、书写 html 结构

放大镜由一个原图，一个放大的细节图，一个蒙版构成

<template><div class="fangda"><!-- 放大镜 --><div class="small"><img id="img1" :src="imgObj.imgUrl" /></div><div class="event" @mousemove="handler"></div><div class="big"><img id="img2" :src="imgObj.imgUrl" ref="big"/></div><!-- 蒙板 --><div class="mask" ref="mask"></div></div>
</template>

三、书写js

1、获取蒙版和放大图的元素

2、计算蒙版左边和顶部的数值

3、约束蒙版的上下左右范围，以免蒙版部分溢出

methods:{handler(event){console.log('1');let mask = this.$refs.mask   // 获取元素let big = this.$refs.biglet l = event.offsetX - mask.offsetWidth/2  // 计算蒙版左边和顶部的数值let t = event.offsetY - mask.offsetHeight/2// 约束蒙版上下左右的范围if(l<0) l=0if(l>mask.offsetWidth)l = mask.offsetWidthif(t<0)t=0if(t>mask.offsetHeight)t = mask.offsetHeightmask.style.left = l+"px"mask.style.top = t+"px"big.style.left = -2*l +'px'big.style.top = -2*t +'px'}}

四、样式

小图采用 100%，大图采用宽高都放大1倍

<style scoped>.fangda{position: relative;width: 400px;height: 400px;border: 1px solid #ccc;}  #img1{width: 100%;height: 100%;} .event {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 998;}.mask {width: 50%;height: 50%;background-color: rgba(0, 255, 0, 0.3);position: absolute;left: 0;top: 0;display: none;border-radius: 50%;}.big {width: 100%;height: 100%;position: absolute;top: -1px;left: 100%;border: 1px solid #aaa;overflow: hidden;z-index: 998;display: none;background: white;}img {width: 200%;max-width: 200%;height: 200%;position: absolute;left: 0;top: 0;}     .event:hover ~ .mask,.event:hover ~ .big {display: block;}
</style>

最后效果

简单的电商商品详情图片放大镜（vue）相关推荐

电商商品详情 API（商品主图、sku）
在技术交流群,大家有探讨稳定获取淘宝商品主图.价格.标题,及sku的完整解决方案.这个引起了我技术挑战的兴趣. 目前,自己做了压测,QPS高.出滑块概率极低,API整体稳定,可满足业务场景的性能需求 ...
API技术分享，电商商品详情的采集
API入口请求参数请求参数:num_iid=652874751412&is_promotion=1 参数说明:num_iid:商品ID is_promotion:是否获取取促销价响应参数 ...
企业信息化，电商商品详情API接口，数据返回值说明,商品详情，关键词搜索，价格监控，卖家买家订单等相关数据
都在说API,API到底是什么? 对于很多非IT人士而言,API ≈ 听不懂. 其实日常生活中,我们有很多类似API的场景,比如: 电脑需要调用手机里面的信息,这时候你会拿一根数据线将电脑手机连接起来 ...
Flutter实现京东淘宝电商商品详情页效果
之前开发电商的功能时,需要做商品界面,UI基本是参考京东.淘宝的效果,以前android原生开发的时候觉得很好做,切到Flutter之后只能自己想办法,所以自己后来做出了这样的效果,分享下实现方案. ...
React-Native仿某电商商品详情页面
前言: 一周又过去了,一直在赶需求,除了自己利用空余时间学习一下外压根就没时间去研究新东西,唉~程序猿就是这样,活到老学到老!! 废话不多说了,公司产品觉得某电商的商品详情页面很nice,问我们能不能 ...
html访问java接口出现缓存_高可用架构设计(3) -电商商品详情页缓存背景及框架说明...
Github 0 导读我们这个教程,基于hystrix,如何来构建高可用的分布式系统的架构,项目实战模拟真实业务的这么一个小型的项目,来全程贯穿,用这个项目中的业务场景去一个一个的讲解hystri ...
高可用架构设计(3) -电商商品详情页缓存背景及框架说明
大背景:电商网站,首页,商品详情页,搜索结果页,广告页,促销活动,购物车,订单系统,库存系统,物流系统小背景:商品详情页,如何用最快的结果将商品数据填充到一个页面中,然后将页面显示出来分布式系统: ...
电商商品详情如何快速高效获取，api来帮你！
item_get-获得淘宝商品详情接口测试 API返回数据 { "items": { "page": "1", ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品详情页面
文章目录前言一.商品详情⻚⾯前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流量和订单的入口.京东商城目前有通用版.全球购.闪购.易车.惠买车.服装.拼购.今日抄底等许多套模板. ...

简单的电商商品详情图片放大镜（vue）

一、从服务器先获取图片：本次获取图片是从父组件传过来的

二、书写 html 结构

三、书写js

简单的电商商品详情图片放大镜（vue）相关推荐

最新文章

热门文章