vue鼠标上下滚动放大与缩小

最新推荐文章于 2024-06-06 15:53:07 发布

*初级小白*~

最新推荐文章于 2024-06-06 15:53:07 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js

原文链接：https://blog.youkuaiyun.com/Jim_ChenHui/article/details/120341721?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-3.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个基于JavaScript实现的网页元素缩放功能，通过监听鼠标的上下滚动来调整元素的scale值，使内容在滑动时动态改变大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="body" class="body">
    <div class="content" id="content">缩放的元素</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        scale: 1
      }
    },
    methods: {
      // 向上滑动
      zoomin(){
        document.getElementById('content').style.transform=`scale(${this.scale})`
        this.scale+=0.05
      },
      // 向下滑动
      zoomout(){
        document.getElementById('content').style.transform=`scale(${this.scale})`
        this.scale-=0.5
        if(this.scale<0.5){
          this.scale=0.5
        }
      }
    },
    mounted(){
      document.getElementById('body').onmousewheel=(event)=>{
        let dir=event.deltaY>0 ? 'Up':'Down'
        if(dir=='Up'){
          //向上滑动
          this.zoomin()
        }else{
          //向下滑动
          this.zoomout()
        }
        return false;
      }
    }
  }
</script>

<style lang="scss" scoped>
.body{
  width: 500px;
  height: 500px;
  background-color: pink;
}
.content{
  width: 400px;
  height: 400px;
  transition: all 0.5s;
  background-color: skyblue;
  margin: 0 auto;
}
</style>