vue大屏展示,
这篇文章主要为大家详细介绍了某视频剪辑软件实现商品详情页放大镜功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现商品详情页放大镜的具体代码，供大家参考，具体内容如下
模板中内容
div class=productLeft
！-左侧中图-
div class=mdImg
img :src=require(./assets/imgs/details/ mdImgUrl) alt=
/div
！-遮罩层-
div v-show= is show class= marks :style= { top:top px ，left:left px}/div
！-遮罩层玻璃板超级市场-
div @ mouseenter= enter @ mouseleave= leave @ mousemove= marks class= super marks /div
！-左侧小图-
div class=smImg
！-左按钮-
div @ click= prev class= button-prev
img src=./assets/icon/prev.png
/div
div class=smImgUl
ul:style= { margin-left :左边距 px }
Li @ mouse enter= enter Li(index) v-for=(item，index) of list :key=index
img :src=require(./assets/imgs/details/项目。sm) alt=
/李
/ul
/div
！-右按钮-
div @ click= next class= button-next
img src=./assets/icon/next.png
/div
/div
！-左侧大图-
div v-show=isShow class=lgImg
img :src=require(./assets/imgs/details/ lgImgUrl) alt= :style= { top:top gimg px ，left:leftLgImg px}
/div
/div
js:
脚本
从导入海德特./common/headerT.vue
从导入标题 common/Header.vue
导出默认值{
data() {
返回{
列表：[{sm:s1.png ， md:s1.png ， lg:s1.png}，
{sm:s2.png ， md:s2.png ， lg:s2.png}，
{sm:s3.png ， md:s3.png ， lg:s3.png}，
{sm:s4.png ， md:s4.png ， lg:s4.png}，
{sm:s5.png ， md:s5.png ， lg:s5.png}，
{sm:s6.png ， md:s6.png ， lg:s6.png}，
{sm:s7.png ， md:s7.png ， lg:s7.png}，
{sm:s8.png ， md:s8.png ， lg:s8.png}]，
mdImgUrl:s1.png ，
lgImgUrl:s1.png ，
ulIndex:0，//向左移动几个里
marginLeft:0，//向左向右移动的距离
isShow:false，//控制遮罩层记号和大图片是否显示
左：0,//标记左移位置
顶部：0,//标记下移位置
leftLgImg:0，//大图lgImg移动的位置
top gimg:0//大图lgImg移动的位置
}
},
方法：{
//鼠标进入小图时事件，显示对应的中图
enterLi(e){
//e是对应的下标
//控制台。日志(e)；
this.mdImgUrl=this.list .MD；
this.lgImgUrl=this.list .LG；
},
//点击左右按钮事件保险商实验所的里移动，每个里宽74px，ul宽370显示5个里
prev(){
//向左移动-
如果(这个。ulindex-(这个。列表。长度-5)){
这个。ulindex-；
这个。左边距=this。ulindex * 74
//console.log(this.ulIndex)
}
},
下一个(){
//向右移动
if(this.ulIndex0){
this.ulIndex
这个。左边距=this。ulindex * 74
//console.log(this.ulIndex)
}
},
//鼠标进入和离开
enter(){
this.isShow=true
},
leave(){
this.isShow=false
},
//遮罩层放大镜
标志(e){
//console.log(e.offsetX，e.offsetY) //鼠标移入时的位置
var marksWidth=200//标记的宽
var marksHeight=200//标记的高
这个。left=e . offsetx-标记宽度/2；
这个。top=e . offset-marks高度/2；
//console.log(this.left，this.top)
if(this.left0){
这个。左=0；
}else if(this.left250){
this.left=250
}
if(this.top0){
这个。top=0；
}else if(this.top250){
this.top=250
}
//console.log(this.left，this.top)
//中图片差异宽高450,大图片差异宽高800
这个。左lgimg=-这个。左* 800/450；
这个。top gimg=-这个。top * 800/450；
}
},
计算值：{
},
组件：{
headerone:headerT，
headertwo :标头
},
观察：{
},
}
/脚本
CSS:
样式范围。内容{
宽度：1200像素
边距：0自动；
}。内容。产品
显示器：flex
justify-content:space-between；
}
/* 左侧大小图样式*/。产品左侧{
宽度：450像素
位置：相对；
}
/* 左侧中图*/。mdImg，1000 .mdImgimg{
宽度：450像素
高度：450像素
}
/*遮罩层超级市场*/。超级市场{
宽度：450像素
高度：450像素
背景色：rgba(220，220，220，0)；
位置：绝对；
top:0px；
左：0px
}
/* 遮罩层*/。标记{
宽度：200像素
高度：200像素
位置：绝对；
背景色：rgba(220，220，220，0.5)；
/* top:0px；//内联设置了动态的顶部，左侧
左：0px*/
}
/* 左侧小图*/。smImg{
显示器：flex
对齐-项目：居中；
justify-content:space-between；
溢出：隐藏；
}。smImgUl{
溢出：隐藏；
宽度：370像素
}。smImg ul{
显示器：flex
宽度：370像素
边距：0;
填充：0;
}。smImg ulli{
填充：0 3px
}。smImg img{
高度：60px
保证金：4px
}
/* 左侧隐藏大图*/。lgImg{
宽度：400像素
高度：400像素
溢出：隐藏；
位置：绝对；
top:0px；
左：450像素
边框：2px纯色# aaa
背景色：# fff
}。lgImg img{
宽度：800像素
高度：800像素
位置：绝对；
/* top:100px；
左：100像素*/
}
/*产品右侧*/。产品权利{
宽度：700像素
}
/* 左右按钮*/。按钮-上一页。按钮-下一步{
宽度：35px
高度：35px
行高：30px
边框：1px固体# ddd
边界半径：50%;
文本对齐：居中；
}。按钮-上一页：悬停。按钮-下一个：悬停{
背景色：# eee
}。按钮预览。按钮-下一步{
宽度：20px
高度：20px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。