vue点击图片放大组件,vue图片放大插件
这篇文章主要为大家详细介绍了某视频剪辑软件图片放大镜组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于某视频剪辑软件的图片放大镜组件封装，供大家参考，具体内容如下
图片放大镜的实现过程是将一个小图放置在一个盒子里，当鼠标在小图盒子里移动时，出现一个移动块（阴影区域/遮罩层),右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。效果图如下：
实现图片放大镜效果的某视频剪辑软件组件代码如下：
模板
差异
div class= move @ mouse over= over() @ mouseout= out() @ mousemove= move($ event)
div id=small //小图片以及遮罩层容器
div id=float/div //遮罩层
img :src=item id=smallimg //需要放大的图片
/div
/div
div id=大
img :src=item //放大以后的图片
/div
/div
/模板
脚本
var float，smallimg，big，bigImg，small，float_maxJL_t，float_maxJL_l，bigImg_maxJL_t，big img _ maxJL _ l；
导出默认值{
道具：{
项目：{
类型：字符串
}
},
data() {
返回{
}
},
已安装(){
浮动=文档。getelementbyid( float )；//左侧遮罩层
小型img=文档。getelementbyid(“小img”)；//左边的小图
大=文档。getelementbyid( big )；//右侧可视区域
bigImg=大。getelementsbytagname( img )[0]；//右侧大图
小=文档。getelementbyid( small )；//左侧的容器
//得到右侧可视区的宽高
var bigW=big.clientWidth
var bigH=big.clientHeight
//右侧大图的宽高
var bigImgW=bigImg.offsetWidth
var bigImgH=bigimg。偏高；
//左侧的小图的宽高
var小imgw=小img。offsetwidth
var小imgh=小img。偏移高度；
//左侧遮罩层的宽高
漂浮。风格。width=bigW/bigImgW * small imgw px ；//175
漂浮。风格。height=bigH/bigImgH * small imgh/3 * 2 px ；
//遮罩层运动的最大距离
float _ maxJL _ l=small。客户端宽度-浮动。offsetwidth-10；
float _ maxJL _ t=small。客户端高度-浮动。偏移高度-5；
//右侧图片运动的最大距离
bigImg _ maxJL _ l=bigImg。客户端宽度-大。offsetwidth
bigImg _ maxJL _ t=bigImg。客户身高-大。偏移高度；
很大。风格。display= none
漂浮。风格。可见性=隐藏；//鼠标未移入左侧区域使遮罩层以及右侧大图均不可见
},
方法：{
//鼠标移入左侧区域使遮罩层以及右侧大图可见
over: function () {
漂浮。风格。visibility= visible
很大。风格。visibility= visible
很大。风格。display= block
},
//鼠标移出左侧区域使遮罩层以及右侧大图不可见
出局：函数(){
漂浮。风格。可见性=隐藏；
很大。风格。display= none
},
//鼠标移动时遮罩层随鼠标的移动而移动
移动：函数(电动汽车){
var l=ev。clientx-小型。偏移left-float.offsetWidth/2;
var t=ev。客户少。offsettop-float.offsetHeight/2;
如果(l0)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；
//遮罩层运动位置
漂浮。风格。left=l px
漂浮。风格。top=t px
//右侧大图运动位置
bigImg。风格。left=-scaleL * bigImg _ maxJL _ l px ；
bigImg。风格。top=-scaleT * bigImg _ maxJL _ t px ；
},
},
}
/脚本
//css样式
style lang=scss rel=样式表/scss 范围
@ import src/assets/scss/variable . scss ；
#float {
宽度：120px
高度：120px
位置：绝对；//必须
背景：$ primary
边框：1px纯色# ccc
不透明度：0.5；
光标：移动；
}
#大{
位置：绝对；//必须
顶配：260px
左：37.6%；
宽度：350px
高度：500px
溢出：隐藏；
边框：1px纯色# ccc
背景：# ffffff
z指数：1；
可见性：隐藏；
}
#小型{
位置：相对；//必须
z指数：1；
img{
宽度：340px
高度：320px
}
}
#big img {
位置：绝对；//必须
z指数：5；
宽度：700px
高度：700px
}
/风格
在css中，要注意设置每张图片和蒙版图层的位置。
遮罩层分析：
左侧遮罩层的宽度(高度)=右侧可视区域的宽度(高度)/右侧大图的宽度(高度)*左侧小图的宽度(高度)。
(蒙版层可以理解为模拟右边的大图框，在里面放一个大图，然后按照一定比例获取浮动区域，设置框溢出隐藏。右侧大图片相对于右侧容器的比例对应于左侧遮罩层相对于左侧容器的比例)
遮罩移动的距离=左侧容器的宽度(高度)-遮罩层的宽度(高度)；(使其始终在左侧容器中移动)
当鼠标移动到左边的小图片框时，我们需要意识到鼠标始终在蒙版层中，蒙版层会随着鼠标的移动而移动(寓意：鼠标移动时蒙版层的位置与坐标密切相关，不能溢出左边的容器。计算方法见规范)。
注意：这里有一个隐藏的bug，就是当你的界面滚动时，遮罩层不会随着界面的滚动而移动。当界面向下滚动时，鼠标在左侧容器中，但不再在蒙版层区域，蒙版层不再可以移动。解决方案如下：
移动=功能(电动汽车){
var scroll=this . getclientheight()；//获取当前界面的移动位置
var l=ev . clientx-small . offset left-float.offsetWidth/2;
var t=ev . clienty-small . offsettop-float.offsetHeight/2;
t=t滚动；//遮罩层的移动高度要对应加上界面的滚动高度。
if(l0)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 scroll top=0；
if(document . documentelementdocument . documentelement . scroll top)
{
scroll top=document . document element . scroll top；
}
else if(document.body)
{
scroll top=document . body . scroll top；
}
返回scrollTop
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。