vue写出放大镜的效果

用vue写出放大镜查看图片的效果。

安装

npm install vue2.0-zoom

引入

import imgZoom from 'vue2.0-zoom'

组件

components: { imgZoom }

标签

<img-zoom src="img-samll.jpg" width="450" height="250" bigsrc="img-big.jpg" :configs="configs"></img-zoom>

配置参数

configs: {
                width: 650,
                height: 350,
                maskWidth: 100,
                maskHeight: 100,
                maskColor: 'red',
                maskOpacity: 0.2
            }

　　

 

以上为组件的引用方法，针对与此类方法，运用到直接引用的vue.js项目中，做了相应改变。

组件方法

<script>
    /*放大镜组件-start*/
    Vue.component('img-zoom',{
        template:'<div class="_magnifier"> ' +
        '<img :src="src" :width="width" :height="height" @mouseover="handOver"  @mousemove="handMove" @mouseout="handOut"/> ' +
        '</div>',
        props: {
            src: {
                type: String,
                required: true
            },
            bigsrc: {
                type: String,
                required: true
            },
            width:{
                type: String,
                default:'auto'
            },
            height:{
                type: String,
                default:'auto'
            },
            configs: {
                type: Object,
                default:function() {
                    return {
                        width:750,
                        height:450,
                        maskWidth:50,
                        maskHeight:50,
                        maskColor:'#fff',
                        maskOpacity:0.5
                    }
                }
            }

        },
        data:function () {
            return{
                imgObj:{},
                bigImg:{},
                mouseMask:{},
                imgLayer:{},
                imgRect:{},
            }
        },
        methods: {
            handMove:function(e) {
                let objX=e.pageX - this.imgRect.left;
                let objY=e.pageY - this.imgRect.top;
                let backgroundX=objX*(Math.ceil(this.bigImg.width/this.imgObj.offsetWidth)/1.5);
                let backgroundY=objY*(Math.ceil(this.bigImg.height/this.imgObj.offsetHeight)/1.5);
                //判断是否超出界限
                let _maskX=objX-this.mouseMask.offsetHeight/2;
                let _maskY=objY-this.mouseMask.offsetWidth/2;

                if(_maskY<=0){
                    _maskY=0;
                }
                if(_maskY+this.mouseMask.offsetHeight>=this.imgRect.height){
                    _maskY=this.imgRect.height-this.mouseMask.offsetHeight;
                }
                if(_maskX<=0){
                    _maskX=0;
                }
                if(_maskX+this.mouseMask.offsetWidth>=this.imgRect.width){
                    _maskX=this.imgRect.width-this.mouseMask.offsetWidth;
                }
                this.mouseMask.style.webkitTransform=`translate3d(${_maskX}px,${_maskY}px,0)`;
                //判断背景图是否小于预览框
                if(backgroundY+this.configs.height>=this.bigImg.height){
                    backgroundY=this.bigImg.height-this.configs.height;
                }
                if(backgroundX+this.configs.width>=this.bigImg.width){
                    backgroundX=this.bigImg.width-this.configs.width;
                }
                this.imgLayer.style.backgroundPositionX= `-${backgroundX}px `;
                this.imgLayer.style.backgroundPositionY= `-${backgroundY}px `;
            },
            handOut:function(e) {
                this.imgLayer.remove();
                this.mouseMask.remove();
            },
            handOver:function(e) {
                if (!document.getElementById('_magnifier_layer')) {
                    //获取大图尺寸
                    this.imgObj= this.$el.getElementsByTagName('img')[0];
                    this.imgRect =this.imgObj.getBoundingClientRect();
                    this.bigImg = new Image();
                    this.bigImg.src = this.bigsrc;
                    //创建鼠标选择区域
                    this.mouseMask = document.createElement("div");
                    this.mouseMask.className='_magnifier_zoom';
                    this.mouseMask.style.background=this.configs.maskColor;
                    this.mouseMask.style.height=this.configs.maskWidth+'px';
                    this.mouseMask.style.width=this.configs.maskHeight+'px';
                    this.mouseMask.style.opacity=this.configs.maskOpacity;
                    this.imgObj.parentNode.appendChild(this.mouseMask);
                    //创建预览框
                    let imgLayer = document.createElement("div");
                    this.imgLayer=imgLayer;
                    let _layerHeight= this.configs.height;
                    let _layerWidth= this.configs.width;
                    imgLayer.id = '_magnifier_layer';
                    imgLayer.style.width = _layerWidth + 'px';
                    imgLayer.style.height = _layerHeight + 'px';
                    imgLayer.style.left =this.imgRect.left+this.imgRect.width + 'px';
                    imgLayer.style.top = this.imgRect.top+ 'px';
                    imgLayer.style.backgroundImage = `url('${this.bigsrc}')`;
                    imgLayer.style.backgroundRepeat = 'no-repeat';
                    document.body.appendChild(imgLayer);
                }
            }
        }
    });
    /*放大镜组件-end*/

var productInfo = new Vue({
        el: '#productInfo',
        data: {
 /*放大镜配置*/
            configs: {
                width:500,
                height:380,
                maskWidth:100,
                maskHeight:100,
                maskColor:'red',
                maskOpacity:0.2
            }
        },
</script>

　　

标签

<img-zoom :src="item.src" :bigsrc="item.src" :configs="configs"></img-zoom>

　　

样式

 #_magnifier_layer{position: absolute; z-index: 9999; background: #f9f9f9;}
 ._magnifier{position: relative;display: inline-block;}
 ._magnifier img{vertical-align: middle;}
 ._magnifier_zoom{position: absolute; top:0;left:0; z-index: 10;pointer-events:none;}

　　

最终效果