VUE实现多图等比例随鼠标位置缩放

最新推荐文章于 2024-05-06 17:37:47 发布

高级API调用攻城狮

最新推荐文章于 2024-05-06 17:37:47 发布

阅读量331

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/PIOnly/article/details/126855936

版权

效果图：

定义data数据

image_path：是中心图片的路径

offset：是以父级盒子为定位的图片对象的数组。transformStyle用来保存图片CSS的transform属性值。

data() {
    return {
        image_path: require('@/assets/img/1.png'),
        offset: [
            {
                offset_angle: 0,
                imgUrl: require('@/assets/img/2.png'),
                transformStyle: '', // transform组合样式
            },
            {
                offset_angle: 0,
                imgUrl: require('@/assets/img/2.png'),
                transformStyle: '', // transform组合样式
            },
        ],
        grabStatus: false, // 拖拽状态
        // 拖拽样式
        grabClass: {
            top: '150px',
            left: '100px',
            cursor: '',
        },
    };
},

搭建HTML结构

<div class="img-wrapper">
    <!-- 滚轮事件firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel -->
    <div
        class="box"
        ref="box"
        draggable="true"
        @mousemove="_grabMove"
        @mousedown="_grabStart"
        @mouseup="_grabEnd"
        @mousewheel="rollImg"
        @DOMMouseScroll="rollImg"
        :style="grabClass"
    >
        <img
            :src="image_path"
            ref="img"
        >
        <div
            ref="imgDiv"
            :key="'img'+index"
            v-for="(item,index) in offset"
            :style="{'top':item.offsetY  +'px','left':item.offsetX +'px','transform': item.transformStyle}"
            class="img-points"
        >
            <img :src="item.imgUrl">
        </div>
    </div>
</div>