vue图片放大镜组件,vue怎么把视频放大
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单放大镜效果的具体代码，供大家参考，具体内容如下
模板
差异
div class=imgMerror
div class= small div @ mousemove= move($ event) @ mouseenter= enter() @ mouseleave= leave()
img src=/image/2017/07/26/0d 6069 de 4916471 b 92 da 66 b 0 da 8 f 0 EC 9。jpg alt=
div class=imgMask/div
/div
div class=bigDiv
img src=/image/2017/07/26/0d 6069 de 4916471 b 92 da 66 b 0 da 8 f 0 EC 9。jpg alt= class= bigImg
/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
enter(){
设imgMaskDom=document。查询选择器(.imgMask’)；
设bigDivDom=document。查询选择器(.大div’)；
imgmaskdom。风格。display= block
bigdivdom。风格。display= block
},
leave(){
设imgMaskDom=document。查询选择器(.imgMask’)；
设bigDivDom=document。查询选择器(.大div’)；
imgmaskdom。风格。display= none
bigdivdom。风格。display= none
},
移动(e){
设smallDivDom=document。查询选择器(.小div’)；
设imgMaskDom=document。查询选择器(.imgMask’)；
设bigDivDom=document。查询选择器(.大div’)；
设bigImgkDom=document。查询选择器(.bigImg’)；
设ev=e window.event
让左=ev。clientx-smalldivdom。偏移left-imgMaskDom.offsetWidth/2;
设top=ev。客户-小生意。offsettop-imgMaskDom.offsetHeight/2;
if(left 0)left=0；
if(左smalldivdom。offsetwidth-imgmaskdom。offsetwidth){
left=smalldivdom。offsetwidth-imgmaskdom。offsetwidth
}
if(top 0)top=0；
if(顶小divdom。偏移高度-imgmaskdom。偏移高度){
top=smalldivdom。offsetheight-imgmaskdom。偏高；
}
imgmaskdom。风格。left=左‘px’；
imgmaskdom。风格。top=top px
//移动比例
设precentX=left/(smalldivdom。offsetwidth-imgmaskdom。offsetwidth)；
let percenty=top/(smalldivdom。offsetheight-imgmaskdom。offset height)；
bigimgkdom。风格。left=precentX *(bigdivdom。offsetwidth-bigimgkdom。offsetwidth) px ；
bigimgkdom。风格。top=percenty *(bigdivdom。offsetheight-bigimgkdom。offset height)“px”；
}
},
}
/脚本
样式lang=scss
*{
边距：0;
填充：0;
}。imgMerror{
位置：相对；
填充：50px。smallDiv
边框：1px纯色# ccc
宽度：360像素
高度：360像素
位置：相对；
左：0;
top:0；
img{
宽度：100%;
身高：100%;
}。imgMask{
宽度：240像素
高度：240像素
背景：# 00ff98
不透明度：0.5;
光标：移动；
位置：绝对；
左：0;
top:0；
显示：无；
}
}。bigDiv{
边框：1px纯色# ccc
宽度：540像素
高度：540像素
位置：相对；
左：380像素
顶：-360 px；
溢出：隐藏；
显示：无；
img{
宽度：600像素
高度：600像素
位置：绝对；
左：0；
top:0；
}
}
}
/风格
效果图：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。