一个手写的vue放大镜效果


Posted in Javascript onAugust 09, 2019

组件使用less,请确保已安装loader

本组件为放大镜组件,传参列表为:

•width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍

•picList:必传,传入图片列表

使用示例:

script:

import mirror from 'xx/mirror'
 export default {
  components:{
   mirror
  },
  data(){
   return {
    width:300,
    picList:[
      xxxxxx,
      xxxxxx
    ],
   }
  }
 }

html:

<mirror :width="width" :picList="picList" />

详细代码:

HTML:

<template>
 <div class="mirror">
   <div class="wrap" :style="{width:width+'px',height:width+'px'}" >
    <div ref="truth" :style="{width:'100%',height:'100%'}" @mousemove="move" @mouseenter="showMagnify" @mouseleave="hideMagnify">
    <div class="mask" ref="mask" v-show = "showMask" :style="{width:width/2+'px',height:width/2+'px',left:maskPosition.x+'px',top:maskPosition.y+'px'}"></div>
    <img :src="picList[picIndex]" draggable="false"/>
    </div>
    <div class="virtual" ref="virtual" v-if = "isShowVirtual" :style="{width:width+'px',height:width+'px'}" >
      <div class="big" ref = "bigPic" :style="{position:'absolute',width:2*width+'px',height:2*width+'px',backgroundSize:'100% 100%',backgroundImage:`url(${picList[picIndex]})`,left:percent.x, top:percent.y}" >
      </div>
    </div>
   </div>
   <ul class="picList" :style="{width:width+'px'}">
     <li v-for = "(item,index) in picList" :class="{now:index==picIndex}" :data-index="index" :key ="item" @mouseenter="changeIndex">
      <img :src ="item" />
     </li>
   </ul>
 </div>
</template>

JS:

export default {
   props:['width','picList'],//宽度是用来给放大镜的
   data(){
    return {
     picIndex:0,
     isShowVirtual:false,
     showMask:false,
     maskPosition:{},
     percent:{},
    }
   },
   methods:{
    computedOffset(obj,prop){ //计算元素到body的绝对位置
    if(obj==document.body || obj.offsetParent == document.body){
     return parseInt(obj[prop])
    }
    return parseInt(obj[prop])+this.computedOffset(obj.offsetParent,prop)
  },
    changeIndex(e){
     this.picIndex = e.target.dataset.index
    },
    showMagnify(e){
     this.showMask=true;
     this.isShowVirtual = true;
    },
    hideMagnify(){
     this.isShowVirtual=false;
     this.showMask=false
    },
    computePosition(e){
      let x = e.pageX,y = e.pageY;
      let mask = this.$refs.mask;
      let truth = this.$refs.truth;
      let virtual = this.$refs.virtual;
      let bigPic = this.$refs.bigPic;
      x = x-this.computedOffset(truth,'offsetLeft') -mask.offsetWidth/2;
      y = y-this.computedOffset(truth,'offsetTop')- mask.offsetHeight/2;
     if(x<=0) {
       x=0
      }else if(x>truth.offsetWidth - mask.offsetWidth){
       x = truth.offsetWidth/2
      }
      if(y<=0){
       y=0;
      }
      else if(y>truth.offsetHeight - mask.offsetHeight){
       y = truth.offsetHeight/2
      }

      this.maskPosition = {
       x,y
      }
      //计算比例
      this.percent={
       x:-x/(truth.offsetWidth-mask.offsetWidth)*(bigPic.offsetWidth - virtual.offsetWidth)+'px',
       y:-y/(truth.offsetHeight-mask.offsetHeight)*(bigPic.offsetHeight - virtual.offsetHeight)+'px'
      }
    },
    move(e){
     this.computePosition(e)
    }
  }
  }

CSS:

<style lang="less" scoped>
.now{
 border-color: cyan !important;
}
 .mirror{
  width:100%;
  .wrap{
   user-select: none;
   margin-bottom: 20px;
   position: relative;
   background-color: #fff;
   border:1px solid gray;
   box-sizing:border-box;
     cursor: pointer;
    img{
     width:100%;
     height:100%;
    }
    .virtual{
     overflow:hidden;
     width:100%;
     height:100%;
     position:absolute;
     left:calc(100% + 10px);
     top:0;
     background-repeat:no-repeat
    }
    .mask{
     position: absolute;
     background-image: url('https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png');
     background-repeat:repeat;
     cursor: move;
    }
  }
  .picList{
   width:100%;
   display: flex;
   justify-content: space-between;
   flex-wrap:wrap;
   li{
    width:50px;
    height:50px;
    margin:5px;
    border:1px solid transparent;
    box-sizing: border-box;
    img{
     width:100%;
     height:100%
    }
   }
  }
  .picList:after{
   content:"";
   flex:auto;
  }
 }
</style>

可直接复制文件内容至项目使用,文件地址:https://blog-static.cnblogs.com/files/hhyf/mirror.vue.js

效果

一个手写的vue放大镜效果

总结

以上所述是小编给大家介绍的一个手写的vue放大镜效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
js实现一个简易计算器
Mar 30 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 #Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 #Javascript
小程序Request的另类用法详解
Aug 09 #Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 #Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 #Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 #Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 #Javascript
You might like
php mail to 配置详解
2014/01/16 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python编程实现的简单Web服务器示例
2017/06/22 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
ajax是什么及其工作原理
2012/02/08 面试题
上班看电影检讨书
2014/02/12 职场文书
春游踏青活动方案
2014/08/14 职场文书
效能风暴心得体会
2014/09/04 职场文书
小学生读书笔记
2015/07/01 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
Golang gRPC HTTP协议转换示例
2022/06/16 Golang