vue实现滑轮放大图片（transfome属性)

鑫森淼焱垚22

已于 2024-03-07 14:21:37 修改

阅读量463

点赞数 10

文章标签： vue.js javascript 前端

于 2024-03-01 18:38:34 首次发布

本文链接：https://blog.csdn.net/qq_61464807/article/details/136403446

版权

本文介绍了如何在Vue项目中使用HTML模板、JavaScript数据绑定和事件处理，以及CSS样式，实现鼠标滚轮滚动时图片的动态缩放功能。

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

vue中html代码

<template>
    <div id="app" >
        <div class="demo" @mousewheel="mousewheel">
            <img class="img-sty" 
            :style="{transform: transform()}"
            src="@/assets/icon.svg">//图片引入路径
        </div>
    </div>
</template>

vue中js代码：

data(){
        return {
            Xscaling: 0.1,
            Yscaling: 0.1,
            transform() {
                return `scale(${this.Xscaling}, ${this.Yscaling})`
            }
        }
    },
    methods:{
        //  鼠标滑轮转动时改变缩放大小
        mousewheel(e){
            var num= e.deltaY / 1000  //e.deltaY为上下转动时的值为100,-100
            this.Xscaling += num 
            this.Yscaling += num
        }
    }

vue中的css代码：

.demo{
        width: 100%;
        margin: 0 0 20px;
        text-align: center;
    }
    .img-sty{
        width: 500px;
        height: 500px;
        overflow: hidden;
        background-repeat: no-repeat;
        }