网站地图    收藏    合作   

主页 > 前端 > vue教程 >

vue实现商品详情页放大镜功能

来源:自学PHP网    时间:2021-09-12 21:49 作者:小飞侠 阅读:

[导读] vue实现商品详情页放大镜功能...

今天带来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网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论