Vue实现淘宝商品放大镜效果
Vue 实现 效果 商品 淘宝 放大镜
2023-09-14 09:13:49 时间
实现原理:
两个盒子,通过映射来同步进行移动,达到移动放大镜的效果
注意点:
遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积,一定要是等比例的才行,严格控制样式
遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
效果:
代码:
<template>
<div class="fdj" @mousemove="mousemove">
<div class="small" ref="small">
<img src="../assets/copy李茜.jpg" alt="" />
<div class="mask" :style="{'left':left + 'px','top':top + 'px',}" ref="mask"></div>
</div>
<div class="big" ref="big">
<img ref="bigimg" src="../assets/copy李茜.jpg" alt="" :style="{'left':imgX + 'px','top':imgY + 'px',}"/>
</div>
</div>
</template>
<script>
export default {
data () {
return {
top:'',
left:'',
imgX:'',
imgY:'',
}
},
methods: {
mousemove(e){
let small = this.$refs.small
let mask = this.$refs.mask
let big = this.$refs.big
let bigimg = this.$refs.bigimg
// 第一步获取鼠标中点位置
let maskX = e.pageX - small.offsetLeft
let maskY = e.pageY - small.offsetTop
// 让鼠标出现在mask的中心点
maskX = maskX - mask.offsetWidth / 2;
maskY = maskY - mask.offsetHeight / 2;
// 把mask限制到box中
maskX = maskX < 0 ? 0 : maskX;
maskY = maskY < 0 ? 0 : maskY;
maskX = maskX > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : maskX;
maskY = maskY > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : maskY;
//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
// 注意:
// 遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积
// 一定要是等比例的才行严格控制样式
let bigImgX = maskX * (big.offsetWidth - bigimg.offsetWidth) / (small.offsetWidth - mask.offsetWidth);
let bigImgY = maskY * (big.offsetHeight - bigimg.offsetHeight) / (small.offsetHeight - mask.offsetHeight)
this.left = maskX
this.top = maskY
this.imgX = bigImgX
this.imgY = bigImgY
}
}
}
</script>
<style>
/* 新建的项目 去一下默认样式 */
body,html{
padding: 0;
margin: 0;
}
</style>
<style leng="less" scoped>
.small {
width: 400px;
height: 400px;
position: relative;
}
.small img {
width: 100%;
height: 100%;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 410px;
overflow: hidden;
}
.big img {
position: absolute;
width: 800px;
height: 800px;
left:0;
top:0;
}
.mask {
width: 200px;
height: 200px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
}
</style>
相关文章
- vue组件——富文本编辑器
- Vue监听router实现面包屑导航
- 深入浅出vue响应式原理
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- vue面试常见考察点总结
- vue源码分析-响应式系统(二)
- Vue组件库实现按需引入可以这么做
- vue安装axios
- Vue 快速体验
- vue项目中前端鉴权实现(菜单权限,按钮权限)
- 基于Spring Boot、Vue的考试报名系统设计与实现-前后端分离-课程设计-毕业设计一键部署版
- Vue.js 数据绑定的基本实现和代码分析
- 10 行代码!Vue 实现炫酷的 TodoList 动画效果
- Vue的异步更新实现原理是怎样的?
- Vue路由嵌套控制台发出警告Named Route ‘Home‘ has a default child route. When navigating to this named route (:to
- Vue学习笔记(三)
- 每日一题之Vue的异步更新实现原理是怎样的?5
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- vue模板语法{插值表达式}的用法
- 30秒实现Vue吸顶效果
- vue实现下拉框二级联动效果
- Vue动态路由
- vue项目移动端、pc端适配方案
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)