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:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。