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

<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.5if(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>

vue鼠标上下滚动放大与缩小相关推荐

unity 实现了鼠标滚动放大和缩小物体暨拉近拉远相机的效果
思路是,读取鼠标滚轮的滚动倾向,改变相机的视角域(fieldOfView). 但是,仅仅改变视角域是不行的,因为如果物体在视野边缘,在放大的过程中,也就是视角域缩小的过程中, 物体就可能跑到视野以外去 ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
tkinter库绘图实例14：利用鼠标控制图形放大和缩小效果
实例代码 import tkinter as tk # 导入tkinter库,并重命名为tk mywindow = tk.Tk() # 创建一个窗体 mywindow.title("图形的放 ...
vue鼠标滚轮滚动上下页，点击下页，并开始轮播
let timer; export default {data () {return {_lastTime: '',bigScreenData: [],currentPage: 0}},mounted ...
C# Chart折线图使用鼠标滚轮放大、缩小和平移曲线方式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一. Chart折线图使用鼠标滚轮放大.缩小和平移曲线 1.添加鼠标滚轮事件 2.初始化有关参数 3.添加鼠标按下.弹起和移 ...
powerpoint预览_如何放大和缩小PowerPoint演示文稿的一部分
powerpoint预览 Microsoft PowerPoint lets you zoom in and out on a specific part of your PowerPoint sli ...
ZoomMarker 一款用于图片滚动放大拖动，且可以添加标记的jQuery插件
猛戳这里导航至项目地址. #Language Chinese English ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件在项目中需要实现类似地图应用那样的,具有 ...
AE地图基础操作实验（放大、缩小、全图、坐标、鹰眼功能）
本文章实验的开发环境为visiostudio2010,arcgis-engine10.2.在实验中,通过实现c#中窗体程序中AE地图界面的基础操作对AE的基本功能进行学习.本文实验的代码链接置于文末, ...
html使原图缩小三倍,图形的放大和缩小
<图形的放大与缩小>教学设计教学目标: 知识与技能:认识放大和缩小现象,理解并掌握按一定的比将图形放大与缩小,能利用方格纸按一定的比将简单图形放大与缩小,通过图形的放大与缩小体会图形的相 ...
JavaFX鼠标滚动放大缩小图片
一.鼠标滚动放大缩小图片 package cn.util;import java.io.File; import javafx.application.Application; import java ...

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

vue鼠标上下滚动放大与缩小相关推荐

最新文章

热门文章