gpt4 book ai didi

javascript - 如何将 offsetX 和 offsetY 坐标从像素更改为百分比?

转载 作者:太空宇宙 更新时间:2023-11-04 05:50:44 27 4
gpt4 key购买 nike

我正在开发一个工具,我希望在将鼠标悬停在 div 元素上时以百分比 (%) 格式显示 offsetX 和 offsetY 坐标。默认情况下,它采用像素格式。

index.html 文件:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Events</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="vue-events">
<h1>Events in VueJS</h1>
<div id="canvas" v-on:mousemove="updateXY">
<img src="img/img-1.jpg" style="visibility: hidden;" />
{{x}}, {{y}}
</div>
</div>
<script src="js/events.js"></script>
</body>
</html>

event.js 文件:

new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});

最佳答案

你得自己算算

你得到了窗口的宽度和高度,并以此为基础你可以计算出百分比。但请记住,如果您调整窗口大小,该值可能会有所不同。

   new Vue({
el: '#vue-events',
methods:{
updateXY: function(event){
this.x = (event.offsetX * 100) / window.innerWidth;
this.y = (event.offsetY * 100) / window.innerHeight;
}
}
});

关于javascript - 如何将 offsetX 和 offsetY 坐标从像素更改为百分比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58299967/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com