图片放大镜-----放大部分单独显示

最新推荐文章于 2024-11-18 12:10:44 发布

H.F_0331

最新推荐文章于 2024-11-18 12:10:44 发布

阅读量76

点赞数

分类专栏： # 图像特效文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_45660840/article/details/118111923

版权

图像特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用自定义组件MyMagnify，通过预览和放大图片功能，展示了如何通过`<my-magnify>`标签加载图片，并实现鼠标移动时的缩放效果。关键部分包括组件模板的结构、JavaScript中的事件处理和样式设置。

摘要由CSDN通过智能技术生成

主页面

<template>
    <div>
        <my-magnify :previewImg="data.min" :zoomImg="data.max"></my-magnify>
    </div>
</template>
<script>
    import MyMagnify from '../page1.vue';
    import pic from '../../assets/img/TEST.jpg';


    export default {
        data() {
            return {
                data: {
                    min: pic,
                    max: pic
                }
            };
        },
        components: {
            MyMagnify
        },
       
    }
</script>

自定义组件MyMagnify


<template>
    <div class="magnify">
        <div class="preview-box" @mousemove="move($event)"  @mouseout="out" ref="previewBox">
            <img width="100%" height="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.pHeight - 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>

<style lang="scss">
    .magnify {
        position: relative;
        .preview-box {
            width: 800px;
            height: 450px;
            border: 1px solid #dededd;
            position: relative;
            &:hover .hover-box{
                display: block;
            }
            .hover-box {
                position: absolute;
                display: none;
                left: 0;
                top: 0;
                width: 150px;
                height: 150px;
                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: 450px;
            height: 450px;
            overflow: hidden;
            position: absolute;
            left: 850px;
            border: 1px solid #dc7a7a;;
            top: 0;
            img {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
</style>

效果图