vue3实现淘宝放大镜效果的示例代码

目录
  • 实现效果
  • 实现思路
  • 完成小图盒子、遮罩、大图盒子布局
  • 实现鼠标移动到小图盒子显示遮罩和大图盒子
  • 实现鼠标移动遮罩在小图盒子移动
  • 完整代码
  • 总结

实现效果

实现思路

我们实现动图的淘宝放大镜的效果需要4步。

1.完成小图盒子、遮罩、大图盒子布局
2.实现鼠标移动到小图盒子显示遮罩和大图盒子
3.实现鼠标移动遮罩在小图盒子移动
4.实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动

完成小图盒子、遮罩、大图盒子布局

我的布局小图盒子包裹图片、遮罩、大图盒子。
小图盒子为相对定位。遮罩、大图盒子、大图图片都为绝对定位(大图图片没定位不能移动)。mask要设置透明度。只要能实现效果即可。

实现鼠标移动到小图盒子显示遮罩和大图盒子

小图盒子绑定mouseout鼠标移到事件和mouseover鼠标移出事件。每次触发事件的时候切换状态。

实现鼠标移动遮罩在小图盒子移动

小图盒子绑定mousemove鼠标移动事件。鼠标在页面的x坐标减去小图盒子的offersetLeft就是鼠标在盒子的左边这就是遮罩要移动的坐标,想要鼠标在mask的中间要除以2。同理y坐标也是。
实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动
边界值的判断,如果小于等于0,则将mask的left等于0,x的有边界值其实就是小盒子的宽度减去mask的宽度的值。同理y轴就是小盒子的高度减去mask的高度。
带动大图移动有个比例关系。大图片移动距离 = mask的移动距离*大盒子最大移动距离 / mask的x最大移动距离,

完整代码

<template>
  <div
    class="tb-booth"
    @mouseover="onMouseOver"
    @mouseout="onMouseOut"
    @mousemove="onMouseMove"
    ref="boothRef"
  >
    <img
      src="https://img.alicdn.com/imgextra/i3/1917047079/O1CN01lkG2pf22AEUi1owve_!!1917047079.png_430x430q90.jpg"
    />
    <div class="mask" ref="mask" v-show="boxShow" />
    <div class="big-img_box" ref="bigImgBox" v-show="boxShow">
      <img
        class="big-img"
        ref="bigImg"
        src="https://img.alicdn.com/imgextra/i3/1917047079/O1CN01lkG2pf22AEUi1owve_!!1917047079.png"
      />
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
export default {
  setup() {
    const boothRef = ref(null);
    const mask = ref(null);
    const bigImg = ref(null);
    const bigImgBox = ref(null);
    const state = reactive({
      boxShow: false
    });
    const onMouseOver = () => {
      state.boxShow = true;
    };
    const onMouseOut = () => {
      state.boxShow = false;
    };

    const onMouseMove = (e) => {
      let x = e.pageX - boothRef.value.offsetLeft;
      let y = e.pageY - boothRef.value.offsetTop;
      let maskX = x - mask.value.offsetWidth / 2;
      let maskY = y - mask.value.offsetHeight / 2;
      // mask的x最大移动距离
      let maskXMaxMove = boothRef.value.offsetWidth - mask.value.offsetWidth;
      let maskYMaxMove = boothRef.value.offsetHeight - mask.value.offsetHeight;
      let bigImgXMaxMove =
        bigImgBox.value.offsetWidth - bigImg.value.offsetWidth;
      let bigImgYMaxMove =
        bigImgBox.value.offsetHeight - bigImg.value.offsetHeight;
      if (maskX <= 0) {
        maskX = 0;
      } else if (maskX >= maskXMaxMove) {
        maskX = maskXMaxMove;
      }
      if (maskY <= 0) {
        maskY = 0;
      } else if (maskY >= maskYMaxMove) {
        maskY = maskYMaxMove;
      }
      mask.value.style.left = maskX + "px";
      mask.value.style.top = maskY + "px";
      // 大图片移动距离 = mask的移动距离*大盒子最大移动距离 / mask的x最大移动距离
      let bixImgXMove = (maskX * bigImgXMaxMove) / maskXMaxMove;
      let bixImgYMove = (maskY * bigImgYMaxMove) / maskYMaxMove;
      bigImg.value.style.left = bixImgXMove + "px";
      bigImg.value.style.top = bixImgYMove + "px";
    };
    return {
      ...toRefs(state),
      boothRef,
      mask,
      bigImg,
      bigImgBox,
      onMouseOver,
      onMouseOut,
      onMouseMove,
    };
  },
};
</script>
<style scoped>
.tb-booth {
  width: 430px;
  height: 430px;
  position: relative;
  border: 1px solid #cccccc;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: rgb(61, 110, 206);
  opacity: 0.5;
  cursor: move;
}

.big-img_box {
  position: absolute;
  top: 0;
  left: 530px;
  width: 500px;
  height: 500px;
  background-color: #fff;
  border: 1px solid #cccccc;
  overflow: hidden;
}
.big-img {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

总结

  • mouseover、mouseout、mousemove事件的运用
  • v-show显示隐藏
  • vue3获取ref两种方式其中一种通过setup创建ref响应式数据,暴露出去赋予ref元素的值。第二种是getCurrentInstance方法。
  • offsetWidth、offsetHeight、offsetLeft、offsetTop、pageX、pageY的概念

到此这篇关于vue3实现淘宝放大镜效果的示例代码的文章就介绍到这了,更多相关vue3 淘宝放大镜内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3.0 自己实现放大镜效果案例讲解

    需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏.  css中的cursor https://www.runoob.com/cssref/pr-class-cursor.html  鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动  在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>H

  • vue3封装放大镜组件的实例代码

    目录 组件基础结构 目的:实现图片放大镜功能 安装vueuse 功能实现 完整代码 总结 组件基础结构 结尾有完整代码可直接复制使用 目的:封装图片预览组件,实现鼠标悬停切换效果 落地代码: <template> <div class="goods-image"> <div class="middle"> <img :src="images[currIndex]" alt="">

  • vue3封装京东商品详情页放大镜效果组件

    本文实例为大家分享了vue3封装类似京东商品详情页放大镜效果组件的具体代码,供大家参考,具体内容如下 首先先完成基本布局 完成图片的切换效果,通过 mouseenter 事件切换图片 落地代码 <template> <div class="goods-image"> <!-- 预览大图 --> <div class="large" v-show="show" :style="[{ backgro

  • Vue3实现图片放大镜效果

    本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.ba

  • 如何利用vue3实现放大镜效果实例详解

    目录 前言 一.封装的意义 二.如何封装? 1.  准备 2.  开始封装 3. 使用 三. 效果演示 总结 前言 逛购物网站的时候,想必大家都见过鼠标放到商品上,会有一个放大的效果.今天我们就自己动手封装一个放大镜效果的全局组件,一起来看下吧~ 一.封装的意义 从技术角度 通过vue插件方式封装为全局组件,整个项目其他位置也可以使用,且使用方便 模块化开发思想,一个模块实现一个功能 用户角度 可以带来更好的浏览体验 可以看到商品的细节 二.如何封装? 1.  准备 需要用到@vueuse/co

  • Vue3.0 手写放大镜效果

    需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏. css中的cursor 鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动 在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>Hello world</h1> </div> </template> &

  • vue3实现淘宝放大镜效果的示例代码

    目录 实现效果 实现思路 完成小图盒子.遮罩.大图盒子布局 实现鼠标移动到小图盒子显示遮罩和大图盒子 实现鼠标移动遮罩在小图盒子移动 完整代码 总结 实现效果 实现思路 我们实现动图的淘宝放大镜的效果需要4步. 1.完成小图盒子.遮罩.大图盒子布局2.实现鼠标移动到小图盒子显示遮罩和大图盒子3.实现鼠标移动遮罩在小图盒子移动4.实现遮罩的移动范围不能超出小图盒子,且移动时带动大图图片移动 完成小图盒子.遮罩.大图盒子布局 我的布局小图盒子包裹图片.遮罩.大图盒子.小图盒子为相对定位.遮罩.大图盒

  • 用js制作淘宝放大镜效果

    本文实例为大家分享了js制作淘宝放大镜效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 100%; height: 100%;

  • JavaScript仿淘宝放大镜效果

    本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o

  • Python实现淘宝秒杀功能的示例代码

    1.安装 Selenium 模块 Selenium支持很多浏览器,我选择的是Firefox浏览器. 安装方法: ①打开cmd: ②输入命令 pip install selenium: ③回车,等待自动安装: ④当最后一行代码出现Successfully install selenium-XX时,表示安装成功. 2. 插件 FireBug FireBug 是火狐浏览器的一款查看代码元素的插件,可以快速的定位元素,selenium的重点就是元素定位,只有定到位了,才能进行下一步操作. 测试安装成功,

  • js仿淘宝放大镜效果

    仿淘宝放大镜封装效果,供大家参考,具体内容如下 放大镜是做好了,但是没有下面小型导航无法选择放大图片,后期我会在封装出来的.由于考试当前 考完试我会在推出vue的放大效果.以下是代码: 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href

  • 原生js实现淘宝放大镜效果

    大家经常逛淘宝.天猫.京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果.今天闲着没事干,就打算复习一下JavaScript基础,用一下基础知识制作一个类似于淘宝的放大镜效果. 先说一下这个效果需要用到的一些基础知识: css相对定位:position:absolute: 鼠标移入移出以及移动事件:onmouseover.onmouseout.onmousemove,记住这些事件一般不会单个出现 获取鼠标点击坐标:X轴:cli

  • Python 实现毫秒级淘宝抢购脚本的示例代码

    本篇文章主要介绍了Python 通过selenium实现毫秒级自动抢购的示例代码,通过扫码登录即可自动完成一系列操作,抢购时间精确至毫秒,可抢加购物车等待时间结算的,也可以抢聚划算的商品. 博主不提供任何服务器端程序,也不提供任何收费抢购软件.该文章仅作为学习selenium框架的一个示例代码.该思路可运用到其他任何网站,京东,天猫,淘宝均可使用,且不属于外挂或者软件之类,只属于一个自动化点击工具,如有侵犯到任何公司的合法权益,会第一时间将相关代码给予删除. 直接上源码: # !/usr/bin

  • jQuery实现鼠标响应式淘宝动画效果示例

    本文实例讲述了jQuery实现鼠标响应式淘宝动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery淘宝动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></scri

  • js面向对象之实现淘宝放大镜

    本文实例为大家分享了js实现淘宝放大镜的具体代码,供大家参考,具体内容如下 描述: JS面向对象--淘宝放大镜实现 图片的引用是一个大图,一个小图 传输用的ajax,记得改成自己的ip地址,js和html都改一下 效果: 实现: js文件: LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){ return "load_img_finish"; } static init(sourceList){ let img=n

随机推荐