vue电商—商品详情实现电商图片放大镜，移入放大效果，移出放大消失

方法一、封装成组件
页面使用该组件

放大镜组件代码
1、html

2、js
function offset (el) {
let top = el.offsetTop;
let left = el.offsetLeft;
if (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
};
return {
left: left,
top: top
};
}
export default {
name: ‘picZoom’,
props: {
previewImg: {
type: String,
default: ‘’
},
zoomImg: {
type: String,
default: ‘’
}
},
data () {
return {
zoomVisiable: false,
maskShow: false
};
},
methods: {
enter () {
this.maskShow = true;
},
popupBigImg () {
this.KaTeX parse error: Expected 'EOF', got '}' at position 25: …upBigImg') }̲, out () { …emit(‘move’, ev);
this.zoomVisiable = true;
},
init () {
this.oHoverBox = this.refs.hoverBox;this.oPreviewBox=this.refs.hoverBox; this.oPreviewBox = this.refs.hoverBox;this.oPreviewBox=this.refs.previewBox;
this.oBigImg = this.refs.bigImg;this.imgBox=this.refs.bigImg; this.imgBox = this.refs.bigImg;this.imgBox=this.refs.zoomBox;
this.houverWidth = this.oHoverBox.offsetWidth;
this.houverHeight = this.oHoverBox.offsetHeight;
this.pWidth = this.oPreviewBox.offsetWidth;
this.pHeight = this.oPreviewBox.offsetHeight;
this.imgWidth = this.oBigImg.offsetWidth;
this.imgHeight = this.oBigImg.offsetHeight;
this.bWidth = this.imgBox.offsetWidth;
this.bHeight = this.imgBox.offsetHeight;
this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
}
}
};
3、css
.pic-zoom {
// animation: opacity fadeIn 1s;
.preview-box {
width: 360px;
height: 360px;
position: relative;
cursor: crosshair;
img {
display: block;
width: 100%;
height: 100%;
}
.mask {
top: 75px;
left: 75px;
width: 200px;
height: 200px;
position: absolute;
background-color: #fff;
opacity: 0.6;
border: 1px solid #ccc;
cursor: crosshair;
z-index: 101;
}
}
.zoom-box {
top: 0px;
left: 365px;
width: 450px;
height: 400px;
border: 1px solid #999;
position: absolute;
overflow: hidden;
z-index: 100;
background: #fff;
img {
// width: 500px;
// height: 500px;
position: absolute;
border: 0px;
display: block;
left: -100.286px;
top: -125.357px;
}
}
}

方法二、使用vue插件vue-piczoom
1、安装vue-piczoom
npm install vue-piczoom --save
2、使用
组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。如：

vue电商—商品详情实现电商图片放大镜，移入放大效果，移出放大消失相关推荐

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

vue电商—商品详情实现电商图片放大镜，移入放大效果，移出放大消失

vue电商—商品详情实现电商图片放大镜，移入放大效果，移出放大消失相关推荐

最新文章

热门文章