今天带来vue实现商品详情页放大镜功能教程详解
本文实例为大家分享了vue实现商品详情页放大镜的具体代码，供大家参考，具体内容如下
templates中内容
-
< img :src="require('../assets/imgs/details/'+item.sm)" alt="">
js:
< script>
import headerT from "./common/headerT.vue"
import header from "./common/Header.vue"
export default {
data() {
return {
list:[{"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,//向左移动几个li
marginLeft:0, //向左向右移动的距离
isShow:false, //控制遮罩层marks和大图片是否显示"
left:0, //marks左移位置
top:0, //marks下移位置
leftLgImg:0, //大图lgImg移动的位置
topLgImg:0 //大图lgImg移动的位置
}
},
methods: {
//鼠标进入小图时事件，显示对应的中图
enterLi(e){
//e是对应的下标
//console.log(e);
this.mdImgUrl=this.list[e].md;
this.lgImgUrl=this.list[e].lg;
},
//点击左右按钮事件ul的li移动,每个li宽74px，ul宽370显示5个li
prev(){
//向左移动-
if(this.ulIndex>-(this.list.length-5)){
this.ulIndex--;
this.marginLeft=this.ulIndex*74;
//console.log(this.ulIndex)
}
},
next(){
//向右移动++
if(this.ulIndex<0){
this.ulIndex++;
this.marginLeft=this.ulIndex*74;
//console.log(this.ulIndex)
}
},
//鼠标进入和离开
enter(){
this.isShow=true
},
leave(){
this.isShow=false
},
//遮罩层放大镜
marks(e){
//console.log(e.offsetX,e.offsetY) //鼠标移入时的位置・
var marksWidth=200;//marks的宽
var marksHeight=200;//marks的高
this.left=e.offsetX-marksWidth/2;
this.top=e.offsetY-marksHeight/2;
//console.log(this.left,this.top)
if(this.left<0){
this.left=0;
}else if(this.left>250){
this.left=250;
}
if(this.top<0){
this.top=0;
}else if(this.top>250){
this.top=250;
}
//console.log(this.left,this.top)
//中图片div宽高450，大图片div宽高800
this.leftLgImg=-this.left*800/450;
this.topLgImg=-this.top*800/450;
}
},
computed: {
},
components:{
"headerone":headerT,
"headertwo":header
},
watch: {
},
}
CSS:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学php网。
以上就是关于vue实现商品详情页放大镜功能全部内容,感谢大家支持自学php网。
