基于Vue的图片放大镜组件封装
来源:互联网 发布:照片电子相册制作软件 编辑:程序博客网 时间:2024/05/18 13:24
基于Vue的图片放大镜组件封装
图片放大镜的实现过程是将一个小图放置在一个盒子里,当鼠标在小图盒子里移动时,出现一个移动块(阴影区域/遮罩层),右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。效果图如下:
实现图片放大镜效果的Vue组件代码如下:
<template> <div> <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)"> <div id="small"> //小图片以及遮罩层容器 <div id="float"></div> //遮罩层 <img :src="item" id="smallimg"> //需要放大的图片 </div> </div> <div id="big"> <img :src="item"> //放大以后的图片 </div> </div></template><script> var float,smallimg,big,bigImg,small,float_maxJL_t,float_maxJL_l,bigImg_maxJL_t,bigImg_maxJL_l; export default{ props: { item: { type: String } }, data() { return{ } }, mounted(){ float = document.getElementById("float"); //左侧遮罩层 smallimg = document.getElementById("smallimg"); //左边的小图 big = document.getElementById("big"); //右侧可视区域 bigImg = big.getElementsByTagName("img")[0]; //右侧大图 small = document.getElementById("small");// 左侧的容器 //得到右侧可视区的宽高 var bigW = big.clientWidth; var bigH = big.clientHeight; //右侧大图的宽高 var bigImgW = bigImg.offsetWidth; var bigImgH = bigImg.offsetHeight; //左侧的小图的宽高 var smallImgW = smallimg.offsetWidth; var smallImgH = smallimg.offsetHeight; //左侧遮罩层的宽高 float.style.width = bigW/bigImgW * smallImgW + "px"; //175 float.style.height = bigH/bigImgH * smallImgH/3*2 + "px"; //遮罩层运动的最大距离 float_maxJL_l = small.clientWidth -float.offsetWidth-10; float_maxJL_t = small.clientHeight - float.offsetHeight-5; //右侧图片运动的最大距离 bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth; bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight; big.style.display = "none"; float.style.visibility ="hidden"; //鼠标未移入左侧区域使遮罩层以及右侧大图均不可见 }, methods: { //鼠标移入左侧区域使遮罩层以及右侧大图可见 over: function () { float.style.visibility ="visible"; big.style.visibility ="visible"; big.style.display = "block"; }, //鼠标移出左侧区域使遮罩层以及右侧大图不可见 out: function () { float.style.visibility ="hidden"; big.style.display = "none"; }, //鼠标移动时遮罩层随鼠标的移动而移动 move: function (ev) { var l = ev.clientX - small.offsetLeft - float.offsetWidth/2; var t = ev.clientY - small.offsetTop - float.offsetHeight/2; if( l < 0 ) l = 0; // 超出左边界赋值为0 if( t < 0 ) t = 0; // 超出上边界赋值为0 if( l > float_maxJL_l ) l = float_maxJL_l; //限制其运动范围在容器之内 if( t > float_maxJL_t ) t = float_maxJL_t; //求出来一个比例 var scaleL = l/float_maxJL_l; var scaleT = t/float_maxJL_t; //遮罩层运动位置 float.style.left = l + "px"; float.style.top = t + "px"; //右侧大图运动位置 bigImg.style.left = -scaleL * bigImg_maxJL_l + "px"; bigImg.style.top = -scaleT * bigImg_maxJL_t + "px"; }, }, }</script>//css样式<style lang="scss" rel="stylesheet/scss" scoped> @import 'src/assets/scss/variable.scss'; #float { width: 120px; height: 120px; position: absolute; //必须 background: $primary; border: 1px solid #ccc; opacity: 0.5; cursor:move ; } #big { position: absolute; //必须 top: 260px; left: 37.6%; width: 350px; height: 500px; overflow: hidden; border: 1px solid #ccc; background: #ffffff; z-index: 1; visibility: hidden; } #small { position: relative; //必须 z-index: 1; img{ width:340px; height:320px; } } #big img { position: absolute; //必须 z-index: 5; width:700px; height:700px; }</style>
在css中需要注意设置各个图片以及遮罩层的位置即position。
遮罩层分析:
左侧遮罩层的宽(高) = 右侧可视区域的宽(高)/右侧大图的宽(高)*左侧小图的宽(高)
(遮罩层可以理解为模拟右侧大图盒子,在右侧大图盒子中放置的是一张大的图片,然后根据一定比例得到浮动区域,同时将盒子设置成溢出隐藏。右侧大图相对于右侧容器的呈现比例和左侧遮罩层相对于左侧容器的比例相对应)
遮罩层运动的距离=左侧容器的宽(高)-遮罩层的宽(高);(使其总是在左侧容器中运动)
当鼠标移动到左侧小图盒子的时候我们需要实现鼠标始终在遮罩层中,并且遮罩层会随着鼠标的移动而移动(言外之意:遮罩层的位置和鼠标移动时的坐标息息相关,且不能使它溢出左边容器,计算方法见代码)。
注意:这里有一个潜藏的bug,即当你的界面滚动的时候,遮罩层不会随界面的滚动而移动,当界面向下滚动的时候,鼠标在左侧容器内但却不再在遮罩层区域里,且无法再移动遮罩层。解决办法如下:
move = function (ev){ var scroll = this.getClientHeight(); //得到当前界面移动的位置 var l = ev.clientX - small.offsetLeft - float.offsetWidth/2; var t = ev.clientY - small.offsetTop - float.offsetHeight/2; t=t+scroll; //遮罩层移动的高度应该相应的加上界面滚动的高度 if( l < 0 ) l = 0; if( t < 0 ) t = 0; if( l > float_maxJL_l ) l = float_maxJL_l; if( t > float_maxJL_t ) t = float_maxJL_t; var scaleL = l/float_maxJL_l; var scaleT = t/float_maxJL_t; float.style.left = l + "px"; float.style.top = t + "px"; bigImg.style.left = -scaleL * bigImg_maxJL_l + "px"; bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";},//获取界面滚动的高度的方法getClientHeight: function(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop;}
阅读全文
1 0
- 基于Vue的图片放大镜组件封装
- 基于cropper.js封装vue在线图片裁剪组件
- vue 组件的封装之基于axios的ajax请求
- 初探 amaze-vue( 基于vue.js封装的Amaze UI 组件库)
- 很酷的放大镜js组件(基于jquery)
- 基于Vue + Node.js + MongoDB的图片上传组件,实现图片的预览和删除
- 在vue中封装可复用的组件
- Vue封装分页组件
- 基于Vue.js的表格分页组件
- 基于vue.js的图像预览组件
- Vue上传图片预览以及删除的vue组件
- vue 图片上传组件
- vue上传图片组件
- 基于VUE评论组件的组件自闭声明周期思考
- Vue中封装input组件
- vue学习系列-完成一个分页组件的封装
- 4.2基于Camera的放大镜
- 基于Flex的裁剪图片功能封装
- 感恩教师节,悦书送好礼
- 通信协议——Http、TCP、UDP
- 快乐数(环路检测)
- 64-ia-32架构优化手册(7)
- 数据库快速获取数据库表字段名
- 基于Vue的图片放大镜组件封装
- 进行数据库插入操作的时候使用 PreparedStatement 更好
- Java基础——Servlet(八)文件上传下载
- 大文件处理异常定位
- 1小时教你理解HTTP,TCP,UDP,Socket,WebSocket
- Android 铃声多媒体音量、静音、震动!震动!震动!哈哈(附源码)
- JVM相关
- MVC——ajax发送delete请求 报错404,405
- 开源静态代码分析工具列表---开源介绍