Vue3.0 手写放大镜效果


Posted in Vue.js onJuly 25, 2021

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。

Vue3.0 手写放大镜效果

 

鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动 

在@vueuse中,有一个工具方法:useMouseInElement

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
 
export default {
  setup() {
    const target = ref(null)
 
    const { x, y, isOutside } = useMouseInElement(target)
 
    return { x, y, isOutside }
  }
}
</script>

这是VueUse 官网上的用法,最后,别忘了return { target } 我一开始没return target,x,y,isOutside的值是 0,0,false,并不是变化的值。

鼠标的位置和遮罩的位置之间的关系: 

Vue3.0 手写放大镜效果 

<div class="layer" :style="layerStyle"></div> //这是遮罩层
setup(){   //下面是实现鼠标跟随的代码
const layerStyle = reactive({
      top: '0px',
      left: '0px'
    })
    // 监听三个值的变化,watch第一个参数用数组
    watch([elementX, elementY, isOutside], () => {
      // layerStyle.left = elementX.value / 2 + 'px'
      // layerStyle.top = elementY.value / 2 + 'px'
      let top = elementY.value - 100
      let left = elementX.value - 100
 
      // 给遮罩元素赋值位置
      if (top < 0) top = 0
      if (top > 200) top = 200
      if (left < 0) left = 0
      if (left > 200) left = 200
      layerStyle.top = top + 'px'
      layerStyle.left = left + 'px'
    })
    return { elementX, elementY, isOutside, target, layerStyle }
 
}

遮罩区域不能超出左侧的父盒子,上面有两行是我注释掉的代码,为什么合起来写不行呢,因为后面我需要加判断时,会发现判断完之后  加px的时候,你会发现无从下手,上面这种分开写的话,top,left 只是一个数值,等计算完成后,再加单位。 

 Vue3.0 手写放大镜效果Vue3.0 手写放大镜效果

放大效果如何实现:  

css 样式里面有个 background-size属性,第一个参数指宽度,第二个参数指高度,可以放大图片

本身是 400 *400,那放大两倍就是 800*800

css 样式里面的 background-position-x, background-position-y 可以放大指定区域

关于background-position: x,y   第一个值是水平位置,第二个值是垂直位置

 这是右侧具有放大效果的div:

<div class="large" :style="{ backgroundImage:`url(${images[current]})`,...largeStyle }"></div>

Vue3.0 手写放大镜效果

这是css代码,可以参考一下: 

.large {
   position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
    background-size: 800px 800px;
    background-color: #f8f8f8;
 }

最后: 当鼠标移出左侧盒子区域,遮罩隐藏,右侧放大的盒子也隐藏

useMouseInElement的isOutSide属性可以监测到是否超出监测元素,v-show="!isOutSide" 即可

到此这篇关于Vue3.0 手写放大镜效果的文章就介绍到这了,更多相关Vue3.0 手写放大镜效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue项目多环境配置(.env)的实现
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
idea编译器vue缩进报错问题场景分析
Vue实现导入Excel功能步骤详解
Vue图片裁剪组件实例代码
You might like
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
什么是JavaScript
2009/08/13 Javascript
不安全的常用的js写法
2009/09/15 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python与idea的集成的实现
2020/11/20 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
体育个人工作总结
2015/02/09 职场文书
导游经典开场白——导游词
2019/04/17 职场文书