首页 > 作文

vue中图片放大镜功能

更新时间:2023-04-07 05:49:32 阅读: 评论:0

仿淘宝详情页图片鼠标移过去可对图片放大显示在右侧

效果图如下图,此功能支持pc端与移动端

接下来进入代码实现环节:

先准备两张图片,一张小图片叫 ‘土味.jpg’,大小160*91;一张大图片叫 ‘ 土味big.jpg ‘,大小visit的过去式320*181。

大家看图片名字是什么就知道我要干什么,大家都懂的,接下来素材准备好了,进入代码环节:

html结构:

<div class="productleft">                <!-- 左侧中图  -->                <div class="mdimg">                    <img :src="qall" alt="">                </div>                <!-- 遮罩层  -->                <div v-show="isshow" class="marks" :style="{top:top+'px',left:left+'px'}"></div>                <!-- 遮罩层 玻璃板 supermarks -->                <div v-if="ispc==fal" @touchstart.prevent="enter" @touchend.prevent="leave"  @touchmove.prevent="marks" @click.prevent="sub()" class="supermarks" ></div>                <div v-if="ispc==true" @mouenter="enter" @mouleave="leave"  @moumove="marks" @click.prevent="sub()" class="supermarks" ></div>                <div v-show="isshow" class="lgimg">                    <img :src="qallbig" alt="" :style="{top:toplgimg+'px',left:leftlgimg+'px'}">                </div>            </div>

js部分:

export default{        name : 'blog-header',        data(){            return{                ispc:true,                // 大图片                qall: '../../static/image/土味.jpg',                qallbig: '../../static/image/土味big.jpg',                isshow:fal,   //控制遮罩层marks和大图片是否显示"                left:0,       //marks左移位置                top:0,         //marks下移位置                leftlgimg:0,       //大图lgimg移动的位置                toplgimg:0         //大图lgimg移动的位置            }                    },        methods:{          //鼠标进入和离开        enter(){            this.isshow=true;        },        leave(){            this.isshow=fal;        },        //遮罩层放大镜        marks(e){  时光流逝的句子          var markswidth=48;//marks的宽            var marksheight=48;//marks的高           if(this.ispc==true){            //pc端                this.left=e.offtx-markswidth/2;                   this.top=e.offty-marksheight/2;                if(this.left<0){                    this.left=0;                }el if(this.left>160){                    this.left=160;                }                if(this.top<0){                    this.top=0;                }el if(this.top>160){                    this.top=160;                }                                //大d图片除以小的图片的宽高                this.leftlgimg=-this.left*320/160;                this.toplgimg=-this.top*181/91;            }el{                //移动端                this.left=e.changedtouches[0].clientx-markswidth/2;                   this.top=e.changedtouches[0].clienty-marksheight/2;                if(this.left<0){                    this.left=0;                }el if(this.left>160){                    this.left=160;                }                if(this.top<0){                    this.top=0;                }el if(this.top>45){ 
            //45就是小图片的高度的一半,91/2 this.top=45; } //大d图片除以小的图片的宽高 this.leftlgimg=-this.left*320/16家的作文0; this.toplgimg=-this.top*181/91; } } }, mounted(){ if (navigator.uragent.match(/(phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowr|juc|fennec|wosbrowr|browrng|webos|symbian|windows phone)/i,)) { this.ispc = fal; } el { console.log('pc端') } } }

css部分:

/* 左侧大小图样式 160*91  320*181*/    .productleft{        width:160px;        position: relative;    }    /* 左侧中图 */    .mdimg,.mdimg>img{        width:160px;        height:91px;        margin-left: 15px;    }    /*遮罩层supermarks */    .supermarks{        width:160px;        height:91px;        background-color:rgba(220, 220, 220, 0);        position:absolute;        top:0px;        left:0px;    }    /* 遮罩层 */    .marks{        width:48px;        height:48px;        position:absolute;        background-color:rgba(220, 220, 220, 0.5);        /*top:0px;  //内联设置了动态的top,left        left:0px;*/    }        /* 左侧隐藏大图 */    .lgimg{        width:160px;        height:91px;        overflow: hidden;        position:absolute;        top:0px;        left:195px;        border:2px solid #aaa;        background-color:#fff;    }    .lgimg img{        width:320px;        height:181px;        position:absolute;        /*top:100px;        left:100px;*/    }

兼容:移动端可f12选择移动端查看(鼠标长按移动查看效果),pc端鼠标移动查看效果

大家的图片的路径记得要写对!!!

还有第二种方法(vue的写法)

vue-piczoom

先安装此插件:

# 安装 install npm install vue-piczoom –save

使用:

# 使用 u--scriptimport piczoom from 'vue-piczoom'export default {  name: 'app',  components: {    piczoom  }}--html<pic-zoom url="static/aze.jpg" :scale="3"></pic-zoom>

s电影 华尔街uggest 注意事项

组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内。如:

<div class="pic-box"> <!--pic-box:width:500px;height:500px-->     <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom></div>

兼容:支持pc端,不支持移动端

github

虽然以上的两种方法已经可以满足我们了,

但还为大家在网上搜索到以下的实现方法,大家有兴趣可以移步观看:

使用vue photo zoom pro:https://codepen.io那些年那些事儿/xbup/project/editor/ajnegejs仿淘宝主图放大镜功能:vue.js手机端图片点击放大展示代码:

本文发布于:2023-04-07 05:49:30,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/c5a109e9da6cdde684b87d468a34db4c.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:vue中图片放大镜功能.doc

本文 PDF 下载地址:vue中图片放大镜功能.pdf

下一篇:返回列表
标签:图片   鼠标   大图   位置
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图