一个手写的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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 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
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
PyCharm中代码字体大小调整方法
2019/07/29 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
美国眼镜网站:LensCrafters
2020/01/19 全球购物
初三新学期计划书
2014/05/03 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
四风自我剖析材料
2014/09/30 职场文书
银行贷款委托书范本
2014/10/11 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年三万活动总结
2015/03/25 职场文书
红色经典电影观后感
2015/06/18 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS