前端电商项目常用组件—

放大镜

我们在写前端电商项目的时候，到查看商品详情页，基本上都会用到图片展示，当我们鼠标放上去的时候，旁边会有一个放大的图片去展示。
下面是用vue2.0来写的一个放大镜效果，html结构，这里主要要注意的是我们要有两个空的div标签，一个用来绑定鼠标事件，一个用来做我们的遮罩层（蒙板）

<template><div class="spec-preview"><img :src="skuImageObj.imgUrl" /><div class="event" @mousemove="handler"></div><div class="big"><img :src="skuImageObj.imgUrl"  ref="big"/></div><div class="mask" ref="mask"></div></div>
</template>

CSS样式，这里要注意的是mask遮罩层一定是一个定位元素，因为只有定位元素我们才能获取到他的top和left，从而去进行一些操作，还有遮罩层的大小要根据我们的图片放大比例去设置

<style lang="less">
.spec-preview {position: relative;width: 400px;height: 400px;border: 1px solid #ccc;img {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;}.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>

JavaScript事件逻辑，这里要注意的点就是边界问题，还有就是大图的单位要设置成负的

methods: {handler(e) {let big = this.$refs.big;let mask = this.$refs.mask;let left = e.offsetX - mask.offsetWidth / 2;let top = e.offsetY - mask.offsetHeight / 2;// 限制边界if (left < 0) {left = 0;}if (top < 0) {top = 0;}if (left > mask.offsetWidth) {left = mask.offsetWidth;}if (top > mask.offsetHeight) {top = mask.offsetHeight;}// 注意这里必须要加单位mask.style.left = left + "px";mask.style.top = top + "px";// 这个是展示框固定，图片移动所以要是负的big.style.left = -2 * left + "px";big.style.top = -2 * top + "px";},},

前端电商项目常用组件——放大镜相关推荐

前端电商项目实战，如何从 0 开始创造一个【考拉海购官网】？（共6节教程）
文章目录声明一,关于页面还原度效果比较二,第一组演示图是考拉海购官网的三,第二组演示图是本次教程从0开发的四,教程目录(共6节) 五,全部代码下载地址新手提示 (1)如何从github ...
小兔鲜儿Vue3.0前端电商项目实战
小兔鲜儿Vue3.0实现了电商平台主线业务功能,电商首页.一级分类.二级分类.商品详情.购物车.结算.支付.个人中心.订单管理.订单详情. 项目采用前后端分离模式,前台使用了VUE3.0技术栈构建,自 ...
【愚公系列】2022年10月微信小程序-优购电商项目-⾃定义组件传参
文章目录前言一.id和data-xxx传参二.导航传值三.父子组件传值前言组件传参是小程序中非常重要的一个功能,因为小程序大多都是组件形式存在的. 一.id和data-xxx传参 view ...
电商项目必备技能=＞放大镜
电商项目必备技能 ===> 放大镜放大镜的主要原理就是两个同样大小的盒子,两张图片,大图是小图的两倍,根据鼠标位置的移动来显示遮罩层里面的内容实现步骤: 1.当鼠标进入,显示遮罩层 2.遮罩 ...
电商项目——商品服务-API-属性分组——第十一章——上篇
电商项目--初识电商--第一章--上篇电商项目--分布式基础概念和电商项目微服务架构图,划分图的详解--第二章--上篇电商项目--电商项目的虚拟机环境搭建_VirtualBox,Vagrant-- ...
微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）
目录一.商城架构图前端: 二.商城管理系统前端页面 1.SPA介绍 2.webpack 四个核心概念 3.vue-cli 安装 4.项目测试三.电商项目搭建创建父模块管理创建子模板注册中心l ...
【项目实战经验】电商系统常用数据结构
查看全文 http://www.taodudu.cc/news/show-5356572.html 相关文章: android电商评论,三步教你获取电商评论数据黑马Vue电商电商数据仓库理论 ja ...
电商项目相关面试问题及答案
请描述一下这个系统? [回答技巧] 从3个方面来回答这个问题: |–系统背景及系统概述 |–系统包括的业务模块及主业务流程 |–责任模块 [回答示例] 第一个方面:系统背景及系统概述优购时尚商城是香 ...
暑期学习与“懒人电商”项目经验总结
该文章作为本人暑期学习和实战的经验总结,既是笔记也是自己踩过的坑,分享给大家,如有错误请各位大佬指正. 一.HTML与CSS的知识点总结 (1) autocomplete="off&quo ...
电商项目中的经典问题
转载自:https://blog.csdn.net/A_BlackMoon/article/details/80094814 请描述一下这个系统? [回答技巧] 从3个方面来回答这个问题: |--系统 ...

前端电商项目常用组件——放大镜

放大镜

前端电商项目常用组件——放大镜相关推荐

最新文章

热门文章