vue实现淘宝京东商品放大镜效果

实现原理：
两个盒子，通过映射来同步进行移动，达到移动放大镜的效果。

注意点：
遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积
一定要是等比例的才行，严格控制样式

效果图：

贴上代码

控制遮罩层以及右边大图的显示隐藏这个自己用事件移入跟移除做一下display: none或者v-if控制；过于简单这里就不做这个了。

<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.smalllet mask = this.$refs.masklet big = this.$refs.biglet bigimg = this.$refs.bigimg// 第一步获取鼠标中点位置let maskX =  e.pageX - small.offsetLeftlet 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 = maskXthis.top = maskYthis.imgX = bigImgXthis.imgY = bigImgY//  控制遮罩层以及右边大图的显示隐藏 这个自己用事件移入跟移除做一下display: none或者v-if控制；过于简单这里就不做这个了。}}
}
</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仿淘宝京东商品多条件筛选（vue实现）
<template><div id="warp">你选择的是:<mark v-for="(item,index) in arr"& ...
Android仿淘宝京东商品规格参数颜色筛选
Android 选择商品属性sku 最近项目中使用SKU属性查询,类似淘宝京东商品的选择,在网上查询了弄了几个源码看看,发现还是实现不了多属性选择问题,再原基础上改动相当费事,所以想干脆自己处理这个问 ...
仿淘宝京东商品规格属性选择的最简单实现
仿淘宝京东商品规格属性选择的最简单实现商城里面的规格选择,网上大部分是自定义控件实现的,显得很是麻烦,而我的实现方式是大家最常用的控件RecyclerView,特点是性能好,简单.废话不多说,先看实 ...
淘宝京东商品长链接缩短为腾讯，新浪短链接的接口有哪些？
分享淘宝京东商品宝贝的都知道,商品的详情页链接太长在微博,微信发布的话太占用字符空间了,而且过长的链接很不正规用户难以接受.所以我们需要将这些长链接转换缩短成一个非常短的短链接再发布.所有短链接服务商 ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
Android 仿淘宝京东商品详情页阻力翻页效果
原文链接:http://code.taobao.org/p/android-example/diff/46/trunk/%E5%95%86%E5%9F%8E%E8%AF%A6%E6%83%85/src ...
Vue实现电商网站商品放大镜效果
效果图各部分代码 HTML部分 <div id="goodsPics"><div id="imgPre&q ...
Android 仿淘宝京东商品详情视频+图片与图片第一帧获取
近日项目有个新需求就是把原本的商品详情只有图片展示,改为视频+图片方式展示. 此博客只提供记录,与思路具体根据自己需求实现.首先想到的是Google搜索下别人的实现方式来参考实现发现不怎么适合项目需求 ...
用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能一.前言二.图示淘宝商品放大镜效果三.需要掌握的知识点四.放大镜实现原理五.放大镜代码及注释六.放大镜最终成果七.放大镜源码八.总结一.前言今天翻阅文件夹看到了之前写 ...

vue实现淘宝京东商品放大镜效果

vue实现淘宝京东商品放大镜效果相关推荐

最新文章

热门文章