精华内容
下载资源
问答
  • 主要介绍了一个手写的vue放大镜,组件使用less,文中给出了示例代码,需要的朋友可以参考下
  • vue实现放大镜效果

    2020-10-14 18:27:52
    主要为大家详细介绍了vue实现放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue放大镜效果

    2019-12-19 11:55:29
    <template> <div> <div class="imgMerror"> <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()"> &...
    <template>
        <div>
            <div class="imgMerror">
                <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()">
                    <img src="http://img2.zhidianlife.com/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="">
                    <div class="imgMask"></div>
                </div>
                <div class="bigDiv">
                    <img src="http://img2.zhidianlife.com/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="" class="bigImg">
                </div>
            </div>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            enter(){
                let imgMaskDom = document.querySelector('.imgMask');
                let bigDivDom = document.querySelector('.bigDiv');
                imgMaskDom.style.display = 'block';
                bigDivDom.style.display = 'block';
            },
            leave(){
                let imgMaskDom = document.querySelector('.imgMask');
                let bigDivDom = document.querySelector('.bigDiv');
                imgMaskDom.style.display = 'none';
                bigDivDom.style.display = 'none';
            },
            move(e){
                let smallDivDom = document.querySelector('.smallDiv');
                let imgMaskDom = document.querySelector('.imgMask');
                let bigDivDom = document.querySelector('.bigDiv');
                let bigImgkDom = document.querySelector('.bigImg');
    
                let ev = e || window.event;
                let left = ev.clientX - smallDivDom.offsetLeft - imgMaskDom.offsetWidth/2;
                let top = ev.clientY - smallDivDom.offsetTop - imgMaskDom.offsetHeight/2;
                if(left < 0) left=0;
                if(left > smallDivDom.offsetWidth - imgMaskDom.offsetWidth){
                    left = smallDivDom.offsetWidth - imgMaskDom.offsetWidth;
                }
                if(top < 0) top=0;
                if(top > smallDivDom.offsetHeight - imgMaskDom.offsetHeight){
                    top = smallDivDom.offsetHeight - imgMaskDom.offsetHeight;
                }
                imgMaskDom.style.left = left + 'px';
                imgMaskDom.style.top = top + 'px';
    
                //移动比例
                let precentX = left / (smallDivDom.offsetWidth-imgMaskDom.offsetWidth);
                let precentY = top / (smallDivDom.offsetHeight-imgMaskDom.offsetHeight);
                bigImgkDom.style.left = precentX * (bigDivDom.offsetWidth - bigImgkDom.offsetWidth) + 'px';
                bigImgkDom.style.top = precentY * (bigDivDom.offsetHeight - bigImgkDom.offsetHeight) + 'px';
    
            }
        },
    }
    </script>
    
    <style lang="scss">
        *{
            margin: 0;
            padding: 0;
        }
        .imgMerror{
            position: relative;
            padding: 50px;
            .smallDiv{
                border: 1px solid #ccc;
                width: 360px;
                height: 360px;
                position: relative;
                left: 0;
                top: 0;
                img{
                    width: 100%;
                    height: 100%;
                }
                .imgMask{
                    width: 240px;
                    height: 240px;
                    background: #00ff98;
                    opacity: 0.5;
                    cursor: move;
                    position: absolute;
                    left:0;
                    top: 0;
                    display: none;
                }
            }
            .bigDiv{
                border: 1px solid #ccc;
                width: 540px;
                height: 540px;
                position: relative;
                left: 380px;
                top: -360px;
                overflow: hidden;
                display: none;
                img{
                    width: 600px;
                    height: 600px;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    </style>

    展开全文
  • Vue放大镜 VuePhotoZoomPro

    千次阅读 2019-08-30 16:37:34
    npm install vue-photo-zoom-pro 2.引入 main.js import VuePhotoZoomPro from 'vue-photo-zoom-pro' Vue.use(VuePhotoZoomPro) 3.使用*.vue <vue-photo-zoom-pro url=""></vue-photo-zoom-pro&...

    1.安装

    npm install vue-photo-zoom-pro

    2.引入 main.js

    import VuePhotoZoomPro from 'vue-photo-zoom-pro'
    
    Vue.use(VuePhotoZoomPro)

    3.使用 *.vue

    <vue-photo-zoom-pro url=""></vue-photo-zoom-pro>

    使用时可设置:

    PropTypeDefaultNote
    urlString 图片地址(photo url)
    high-urlString 更清晰的图片,若不提供会采用 url(more detailed photo url)
    scaleNumber3放大倍数(scale)
    widthNumber166放大镜宽度(width of magnifying glass)
    selectorStyleObject{}放大镜样式(style of magnifying glass)
    typeStringsquare放大镜类型(circle,square)(magnifying glass type (circle,square))
    hide-zoomBooleanfalse隐藏放大镜,图像加载时不会显示放大镜(hide magnifying)
    out-showBooleantrue图片展示区域会在图片外部(image will be displayed on the outside)
    pointerBooleanfalse外部区域的中心点 (The center of an external area)
    baselineBooleanfalse外部区域的基线 (The baseline of the external area)
    move-eventObject/mouseEventnull当需要在外部监听移动事件时,请通过该字段传入事件(必须包含 pageX,pageY,clientY)(When you need to listen for moving events outside the component)
    leave-eventObject/mouseEventnull当需要在外部监听离开事件时,请通过该字段传入事件(When you need to listen for leaving events outside the component)

    效果:https://codepen.io/xbup/project/editor/AjnEgE

    gitHub:https://github.com/xbup/vue-photo-zoom-pro

     

     

    展开全文
  • vue图片放大镜效果

    2017-11-28 19:00:00
    原作者地址:https://github.com/lemontree2000/vue-magnify 经测试,原插件在使用时有bug,即在预览时进行鼠标滚动,导致遮罩层计算错误。我已修复该bug,特分享出来。 组件核心代码: &lt;template&gt; &...

    原作者地址:https://github.com/lemontree2000/vue-magnify
    经测试,原插件在使用时有bug,即在预览时进行鼠标滚动,导致遮罩层计算错误。我已修复该bug,特分享出来。
    组件核心代码:

    <template>
      <div class="magnify">
        <div class="preview-box" @mousemove="move($event)"  @mouseout="out" ref="previewBox">
          <img width="100%" :src="previewImg" alt="">
          <div class="hover-box" ref="hoverBox"></div>
        </div>
        <div class="zoom-box" v-show="zoomVisiable" ref="zoomBox">
          <img :src="zoomImg" alt="" ref="bigImg">
        </div>
      </div>
    </template>
    
    <script>
    function offset(el) {
      let top = el.offsetTop;
      let left = el.offsetLeft;
      while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
      }
      return {
        left: left,
        top: top
      }
    }
    export default {
      name: 'magnify',
      props: {
        previewImg: {
          type: String,
          default: ''
        },
        zoomImg: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          zoomVisiable: false,
          hoverVisiable: false
        };
      },
      methods: {
        out() {
          this.zoomVisiable = false;
        },
        move(ev) {
          this.init();
          // 鼠标距离屏幕距离
          let moveX = ev.clientX;
          let moveY = ev.clientY;
          // 大盒子距离顶部的距离
          let offsetLeft = offset(this.oPreviewBox).left;
    
          let offsetTop = offset(this.oPreviewBox).top;
          let left = moveX - offsetLeft - this.houverWidth / 2;
          let top
          if(this.scroll > 0) {
            top = moveY - offsetTop + this.scroll - this.houverHeight / 2;
          }else {
            top = moveY - offsetTop - this.houverHeight / 2;
          }
          let maxWidth = this.pWidth - this.houverWidth;
          let maxHeight = this.pWidth - this.houverHeight;
          left = left < 0 ? 0 : left > maxWidth ? maxWidth : left;
          top = top < 0 ? 0 : top > maxHeight ? maxHeight : top;
          let percentX = left / (maxWidth);
          let percentY = top / (maxHeight);
          this.oHoverBox.style.left = left + 'px';
          this.oHoverBox.style.top = top  + 'px';
          this.oBigImg.style.left = percentX * (this.bWidth - this.imgWidth) + 'px';
          this.oBigImg.style.top = percentY * (this.bHeight - this.imgHeight) + 'px';
          this.$emit('move', ev);
          this.zoomVisiable = true;
        },
        init() {
          this.oHoverBox = this.$refs.hoverBox;
          this.oPreviewBox = this.$refs.previewBox;
          this.oBigImg = this.$refs.bigImg;
          this.imgBox = this.$refs.zoomBox;
          this.houverWidth = this.oHoverBox.offsetWidth;
          this.houverHeight = this.oHoverBox.offsetHeight;
          this.pWidth = this.oPreviewBox.offsetWidth;
          this.pHeight = this.oPreviewBox.offsetHeight;
          this.imgWidth = this.oBigImg.offsetWidth;
          this.imgHeight = this.oBigImg.offsetHeight;
          this.bWidth = this.imgBox.offsetWidth;
          this.bHeight = this.imgBox.offsetHeight;
          this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        }
      }
    };
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style lang="scss" scoped>
      .magnify {
        position: relative;
        .preview-box {
          width: 480px;
          height: 480px;
          border: 1px solid #dededd;
          position: relative;
          &:hover .hover-box{
            display: block;
          }
          .hover-box {
            position: absolute;
            display: none;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            border: 1px solid #545454;
            background: url('https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png') repeat 0 0;
            cursor: move;
            user-select: none;
          }
        }
        .zoom-box {
          width: 480px;
          height: 480px;
          overflow: hidden;
          position: absolute;
          left: 485px;
          border: 1px solid #dc7a7a;;
          top: 0;
          img {
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    </style>

    使用:

    <template>
    <div>
    <my-magnify :previewImg="data.min" :zoomImg="data.max"></my-magnify>
    </div>
    </template>
    <script>
    import MyMagnify from "~/components/Magnify.vue";
    export default {
      data() {
        return {
          data: {
            min:
              "https://img.alicdn.com/imgextra/i3/2857774462/TB21fgcwwNlpuFjy0FfXXX3CpXa_!!2857774462.jpg_430x430q90.jpg",
            max:
              "https://img.alicdn.com/imgextra/i3/2857774462/TB21fgcwwNlpuFjy0FfXXX3CpXa_!!2857774462.jpg"
          }
        };
      },
      components: {
        MyMagnify
      }
    }
    </script>

    效果图:
    1027889-20171128185913284-1806879218.png

    我的github

    展开全文
  • Vue实现商品放大镜效果

    千次阅读 多人点赞 2021-09-25 11:24:45
    在这个鼎盛的电商时代各种直播带货或者自主逛宝购物,我们对商品的认知和了解进一步查看详情,发现我们的商品可以放大观看,于是心血来潮运用前端技术Vue框架,写了一个类似放大镜的功能 二、 实现思路: 对原图的显示...

    一、前言:

    在这个鼎盛的电商时代各种直播带货或者自主逛宝购物,我们对商品的认知和了解进一步查看详情,发现我们的商品可以放大观看,于是心血来潮运用前端技术Vue框架,写了一个类似放大镜的功能

    二、 实现思路:

    对原图的显示空间(left) 可以将显示原图可 img 换成canvas,来对图片行进行保护 ,
    跟随鼠标移动时显示放大的指示区(鼠标层罩top) ,显示层罩区域选中放大的显示空间(right)

    三、效果展示

    在这里插入图片描述

    四、具体实现逻辑代码

    template (记得改图片路径)

    <template>
      <div>
        <div class="left">
          <img class="leftImg" src="../../src/assets/curry.jpg" alt="" />
          <!-- 鼠标层罩 -->
          <div v-show="topShow" class="top" :style="topStyle"></div>
          <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
          <div
            class="maskTop"
            @mouseenter="enterHandler"
            @mousemove="moveHandler"
            @mouseout="outHandler"
          ></div>
        </div>
        <div v-show="rShow" class="right">
          <img
            :style="r_img"
            class="rightImg"
            src="../../src/assets/curry.jpg"
            alt=""
          />
        </div>
      </div>
    </template>
    

    style css

    <style scoped>
    /* 放大的图片,通过定位将左上角定位到(0,0) */
    .rightImg {
      display: inline-block;
      width: 800px;
      height: 800px;
      position: absolute;
      top: 0;
      left: 0;
    } /* 右边的区域图片放大空间 */
    .right {
      margin-left: 412px;
      width: 400px;
      height: 400px;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
    } /* 一个最高层层罩 */
    .maskTop {
      width: 400px;
      height: 400px;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    } /* 层罩,通过定位将左上角定位到(0,0) */
    .top {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      opacity: 0.4;
      position: absolute;
      top: 0;
      left: 0;
    } /* 原图的显示 */
    .leftImg {
      width: 400px;
      height: 400px;
      display: inline-block;
    } /* 原图的容器 */
    .left {
      width: 400px;
      height: 400px;
      border: 1px solid teal;
      float: left;
      position: relative;
    }
    </style>
    

    script 核心js

    <script>
    export default {
      data() {
        return {
          topStyle: { transform: "" },
          r_img: {},
          topShow: false,
          rShow: false,
        };
      },
      methods: {
        // 鼠标进入原图空间函数
        enterHandler() {
          // 层罩及放大空间的显示
          this.topShow = true;
          this.rShow = true;
        },
        // 鼠标移动函数
        moveHandler(event) {
          // 鼠标的坐标位置
          let x = event.offsetX;
          let y = event.offsetY;
          // 层罩的左上角坐标位置,并对其进行限制:无法超出原图区域左上角
          let topX = x - 100 < 0 ? 0 : x - 100;
          let topY = y - 100 < 0 ? 0 : y - 100;
          // 对层罩位置再一次限制,保证层罩只能在原图区域空间内
          if (topX > 200) {
            topX = 200;
          }
          if (topY > 200) {
            topY = 200;
          }
          // 通过 transform 进行移动控制
          this.topStyle.transform = `translate(${topX}px,${topY}px)`;
          this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
        },
        // 鼠标移出函数
        outHandler() {
          // 控制层罩与放大空间的隐藏
          this.topShow = false;
          this.rShow = false;
        },
      },
    };
    </script>
    
    

    五、总结思考

    原本我是将三个鼠标事件添加在原图容器 left 上的,结果不断出现问题
    1、在我加了一个覆盖了鼠标区域的透明层罩 maskTop 才让这个放大镜能完整的实现,若是不加这个 maskTop 层罩,在我鼠 标进入原图区域空间时鼠标层罩不会跟着鼠标的移动而移动,更是会在鼠标移动时进行高频率的“颤动”,右边的放大区域空间 也没有顺畅的跟着移动变化
    2、若是没有添加 maskTop 层罩,在我鼠标移入原图区域空间时, mousemove 鼠标移动事件只执行了一次,似乎是因为鼠 标层罩阻挡了
    3、在之前有试过动态地确定鼠标层罩的初始位置,将其放在了mouseenter事件当中,结果 mouseenter 事件执行了异常多次,就像是变成了 mousemove 事件
    有看过其他的放大镜案例,但是他们都不需要加 masktop 这个最顶层的覆盖层罩,期望能有路过的大佬帮忙解惑

    展开全文
  • 使用vue实现商品放大镜效果

    千次阅读 2019-11-07 11:17:56
    <!-- 放大图片 --> v-show="elemenImgShow" ref="thum...
  • Vue3.0 手写放大镜效果

    千次阅读 多人点赞 2021-07-23 10:07:18
    需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursor https://www.runoob.com/cssref/pr-class-cursor.html 鼠标跟随效果如何实现: (子绝父相)绝对...
  • vue项目中实现放大镜效果

    千次阅读 2020-03-04 22:32:00
    vue项目中可以用插件达到商城那个放大镜效果,当然也可以自己写方法,但想到快速的实现此功能就可以直接使用插件。 下载安装插件:npm i PicZoom --save 在要使用的地方引入:import PicZoom from “vue-piczoom...
  • 一个手写的vue放大镜 组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 picList:必传,传入图片列表 使用示例: script: ...
  • 基于vue的图片放大镜效果插件 演示地址 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { imgZoom } 标签 <img-zoom src="img-samll.jpg" wi...
  • 今天我们就自己动手封装一个放大镜效果的全局组件,一起来看下吧~ 一、封装的意义 从技术角度 通过vue插件方式封装为全局组件,整个项目其他位置也可以使用,且使用方便 模块化开发思想,一个模块实现一个功能 ...
  • 然后使用@vueuse/core的useMouseInElement方法获取基于元素的偏移量 计算出 遮罩容器定位与大容器背景定位 暴露出数据给模板使用 //这是大图 根据是鼠标进入小图来进行显示和隐藏 <div class="large" v...
  • 昨天在做商品详情页面时,遇到一个需求,就是图片放大镜效果。在图片上鼠标划过时,右侧出现一个大图,用于展示鼠标移过的区域,也就是图片放大镜效果。 效果图基本类似如下: 我之前有篇文章js实现图片放大镜效果...
  • Vue 实现图片放大镜效果

    千次阅读 2018-11-14 02:53:28
    Vue 实现图片放大镜效果 主要思路:展示一张图片,一个以该图片或大图为背景的div,背景图的宽高是 放大倍数乘原图的宽高 在内部放大时:以鼠标为中心点 取 放大倍数分之1 放大镜长度/2 的正方形的作为放大图像,...
  • 实现效果 实现分析 (1) 基础组件布局 goods-info.vue 父组件 <template> <div class="goods-info"> <!--左边--> <div class="media"> <GoodsImage /> <!-- 商品图片...
  • vue写出放大镜效果

    2018-01-05 14:21:00
    vue写出放大镜查看图片的效果。 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { imgZoom } 标签 <img-zoom src="img-samll.jpg" width="450...
  • vue3 – 自己封装类似京东商品详情页放大镜效果组件
  • <a href="Webshell:1123">放大镜</a>
  • 安装 cnpm install vue-piczoom --save 使用 vue-piczoom <template> <div> <div class="box"> <pic-zoom :url="imgurl" :scale="3"></pic-zoom> </div> <div class=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 464
精华内容 185
关键字:

vue放大镜效果

vue 订阅