Javascript 窗口的X位置随浏览器窗口的更改而更改_Javascript_Html_Css

Javascript 窗口的X位置随浏览器窗口的更改而更改

javascript html css

Javascript 窗口的X位置随浏览器窗口的更改而更改,javascript,html,css,Javascript,Html,Css,我是Java脚本的绝对初学者。我的任务是制作一个交互式收音机，如果鼠标在地图上的某个位置，就会播放歌曲。它可以工作，但只能在特定大小的浏览器窗口中工作。如果我改变大小，“歌曲位置”就错了我正在使用p5库这是我的HTML代码： <!DOCTYPE html> <html> <head> <title>Canvas Trial</title> <link rel="stylesheet" type="text/c

我是Java脚本的绝对初学者。我的任务是制作一个交互式收音机，如果鼠标在地图上的某个位置，就会播放歌曲。它可以工作，但只能在特定大小的浏览器窗口中工作。如果我改变大小，“歌曲位置”就错了

我正在使用p5库

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Trial</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"> </script>
    <script src="../p5.min.js"></script>
    <script src="../addons/p5.dom.min.js"></script>
    <script src="../addons/p5.sound.min.js"></script>

</head>

<body>

    <center><p class="title">CHRISTMAS RADIO</p></center>

    <div class="radio" id="clickArea" onmousemove="trackMouse()"> 
        <img id="radio" onclick="rotate()"  src="images/radio.png""></img>
    </div>

</body>
</html>

这是我的Java脚本：

var x = "";
var y = "";
var song1;
var song2;


function preload() {
  song1 = loadSound('audio/2.mp3');
  song2 = loadSound('audio/3.mp3');
}

function setup() {
    createCanvas(944,566);
}

function draw() {
    clear();
    x = mouseX;

  rect(x, y, 20, 565);
  fill(82, 54, 27);

}

function trackMouse(){
var x = event.clientX;
console.log(window.screenX);


if(x>315&&x<340){
song1.loop();
document.getElementById("clickArea").style.backgroundColor="white";

} else {
song1.stop();
document.getElementById("clickArea").style.backgroundColor="black";
    } 

if(x>400&&x<450){
song2.loop();
document.getElementById("clickArea").style.backgroundColor="#FFDAB9";


} else {
song2.stop();
document.getElementById("clickArea").style.backgroundColor="black";
    } 


}

//document.getElementById("canvas").style.background-image="url("images/Map2.png")";

var x=”“；
变量y=“”；
var song1；
var song2；
函数预加载（）{
song1=loadSound（'audio/2.mp3'）；
song2=loadSound（'audio/3.mp3'）；
}
函数设置（）{
createCanvas（944566）；
}
函数绘图（）{
清除（）；
x=鼠标；
rect（x，y，20565）；
填充（82、54、27）；
}
函数trackMouse（）{
var x=event.clientX；
console.log（window.screenX）；
如果（x>315&&x400&&x，这是因为您正在使用像素中的绝对值来定位无线地图上的区域，并且您正在var x中访问这些区域。您需要百分比中的相对值来使它们保持恒定，即使在调整浏览器大小时也是如此
您可以通过以下方式尝试：获取窗口。innerWidth
和窗口。innerHeight
，将其存储在变量中，比如说v1和v2
，这是您的100%。现在要获取相对位置坐标
，请将您正在使用的当前位置（比如315）除以它，然后乘以100
示例：假设最大化时宽度为1200像素，则315为26.25%
1200。这是您将使用的值，即使
浏览器已调整大小
(Absolute coodinate/ Complete width at maximized screen) X 100 = relative coordinate

(315/1200)x100 = 26.25%

记住要根据这一点对你的代码进行修改，它应该可以正常工作。希望它能给你这个想法
(Absolute coodinate/ Complete width at maximized screen) X 100 = relative coordinate

(315/1200)x100 = 26.25%