固定在畫布上的位置而不會失去響應能力
[英]Fix to position in canvas without losing responsiveness
問題描述
我有nine帶有值的類框 ，另外一個有數字圖像的類002 。
可以將box002拖放到box中的相應起始編號，然后將該列刪除。
我為此做了一個背景，包括一個名稱牌和一個懸掛式牌及其響應式。
我想fix these nine boxes exactly inside the name board an the number image in box002 inside the hanging board. When the nameboard and hanging board size changes when i resize the window the elements should correctly fit inside the nameboard and hanging board.地fix these nine boxes exactly inside the name board an the number image in box002 inside the hanging board. When the nameboard and hanging board size changes when i resize the window the elements should correctly fit inside the nameboard and hanging board. fix these nine boxes exactly inside the name board an the number image in box002 inside the hanging board. When the nameboard and hanging board size changes when i resize the window the elements should correctly fit inside the nameboard and hanging board.
如何做到這一點？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <style> @font-face { font-family: 'Sigmar One'; font-style: normal; font-weight: 400; src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype'); } @import url(https: //fonts.googleapis.com/css?family=Sigmar+One); body { overflow: hidden; } h1 { transform-origin: 50% 50%; font-size: 50px; font-family: 'Sigmar One', cursive; cursor: pointer; z-index: 2; /* position: absolute; top: 0; */ text-align: center; width: 100%; } .heading { margin-left: 20%; margin-right: 20%; margin-top: -2%; } .hint { margin-top: 100%; margin-bottom: -10%; } .box { width: calc(33.3% - 4px); height: 110px; display: inline-block; border-radius: 5px; border: 2px solid #333; border: #000 border-color: #e6e600; margin: -2px; border-radius: 10%; background-color: #99ffff; } .box002 { float: left; width: 100px; height: 100px; margin-left: 74.3%; margin-top: -84%; margin-bottom: 70%; background-color: #ffff00 2px; border: px solid #000066; } #timer { font-family: 'Sigmar One', cursive; margin-top: -20%; margin-left: 120%; } #heading { font-family: 'Sigmar One', cursive; color: #F534BB; } #container { white-space: nowrap; text-align: center; border: px solid #CC0000; } .containerr { padding-top: 30%; padding-right: 30%; padding-left: 30%; padding-bottom: 100%; border: px solid #FF3399; } .pic { background-size: 100% 100%; } .container2 { margin-top: 10%; margin-right: 50%; margin-left: -10%; border: px solid #009; border: px solid #FF3399; } p { font: "Courier New", Courier, monospace; font-size: 30px; color: #000000; text-align: center; } .text { padding: 20px; margin: 7 px; margin-top: 10px; color: white; font-weight: bold; text-align: center; } body { background-image: url(https://image.ibb.co/eV5WW9/background.jpg); background-size: 100vw 100vh; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> </head> <body onload="buildImage();"> <script> window.onload </script> <script type="text/javascript"> </script> <script> var timeOut; function buildImage() { document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')'; } function changeImage() { index++; if (index >= images.length) { index = 0; } document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')'; } var index = 0; </script> <script> var audio = new Audio("correct.mp3"); var audio2 = new Audio("wrong .mp3"); function playAudio() { audio.play(); } function playAudio2() { audio2.play(); } function pauseAudio() { audio.pause(); } function cancelAudio() { audio.pause(); audio.currentTime = 0; } </script> </h1> </div> </script> <h4 id="timer" style="color:#ffc34d; font-size:29px"> Time <span id="countdowntimer">0 </span></h4> </div> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> <div id="2container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> <div id="3container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> </div> </div> </div> <div class="box002" draggable="true" ondragstart="drag(event)" id="2"> <img src="" draggable="true" id="slide" style="width:120px; height:120px; border-radius: 50%;" border="rounded" /> </div> <div class="hint" style="color:#ffffb3; font-size:20px; font-weight:bolder;" align="center"> <h4>Hint:uncover the hidden picture by dragging and droping the clock to its correct time</h4> </div> <script> var items = [{ label: '1:40', url: 'https://via.placeholder.com/75x75?text=1' }, { label: '2:20', url: 'https://via.placeholder.com/75x75?text=2' }, { label: '3:50', url: 'https://via.placeholder.com/75x75?text=3' }, { label: '4:45', url: 'https://via.placeholder.com/75x75?text=4' }, { label: '5:35', url: 'https://via.placeholder.com/75x75?text=5' }, { label: '6:10', url: 'https://via.placeholder.com/75x75?text=6' }, { label: '7:15', url: 'https://via.placeholder.com/75x75?text=7' }, { label: '8:10', url: 'https://via.placeholder.com/75x75?text=8' }, { label: '9:30', url: 'https://via.placeholder.com/75x75?text=9' }, { label: '10:40', url: 'https://via.placeholder.com/75x75?text=10' }, { label: '11:25', url: 'https://via.placeholder.com/75x75?text=11' }, { label: '12:50', url: 'https://via.placeholder.com/75x75?text=12' } ]; var tempimages = []; var array2 = []; array2 = items.slice(); var backimgcount = 1; var len = array2.length; var item; var timeleft = 1; var downloadTimer = setInterval(function() { timeleft++; document.getElementById("countdowntimer").textContent = timeleft; if (timeleft >= 100) clearInterval(downloadTimer); }, 1000); var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random']; var index = 0; function buildImage() { document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')'; } function changeImage() { index++; if (index >= images.length) index = 0; document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')'; } function rvalue() { elements = document.getElementsByClassName("box"); for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = "#1aff1a"; //elements[i].borderRadius = "2px"; elements[i].style.border = "2px solid #ffff80"; //object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit" } ptags = document.querySelectorAll('[name="values"]'); for (var index = 0; index < 9; index++) { randomIndex = Math.floor(Math.random() * array2.length), item = array2[randomIndex]; ptags[index].style.visibility = "visible"; ptags[index].textContent = item.label; tempimages.push({ data: item, index: randomIndex }); ptags[index].dataset.itemIndex = randomIndex; } var tlen = tempimages.length; } function displayAllImages() { if (tempimages.length == 0) { rvalue(); //return; } //tempimages = tempimages.concat(tempimages.splice(0,2)); //item = tempimages.splice(0, 1); function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } // Used like so var arr = tempimages; arr = shuffle(arr); item = arr.shift(); image = document.getElementById('slide'); image.src = item.data.url; image.dataset.itemIndex = item.index; }; $(function() { displayAllImages(); }); function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var el = document.getElementById(data); //alert(data); //alert(el); var x = document.getElementById("slide").dataset.itemIndex; var y = ev.target.dataset.itemIndex; //alert("x=>" + x + " y=>" + y); if (x == y) { //el.parentNode.removeChild; playAudio(); ev.currentTarget.style.backgroundColor = 'initial'; ev.currentTarget.style.border = 'initial'; var pParagraph = ev.currentTarget.firstElementChild; //ev.currentTarget.removeChild(pParagraph); pParagraph.style.visibility = "hidden"; item = this.item; var arrayvalue = item.dataindex; array2.splice(arrayvalue, 1); //alert("sucessfull"); if (tempimages.length == 0) { rvalue(); //changeImage(); changeImage(); } displayAllImages(); } else { playAudio2(); alert("WRONG TIME PLACED"); } } </script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2018-10-15 04:33:41
歸結為：
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center
}
.container2 {
width: 35vw;
position: fixed;
top: 41.5vh;
left: 14vw;
}
.box p {
font-size: calc(2vw + 10px);
}
...和一些清理。
但是，在您的示例中有很多事情是不正確的。 我真的對它的運行印象深刻（我以前從未對任何人這樣說過）。 最初，我同意Kaiido的建議（您應該只提供足夠多的內容來重現問題，而不是整個頁面），但是，我研究的越多，考慮到代碼的狀態，我就越意識到這是一項不可能完成的任務。
帶着所有應有的尊重和最有幫助的意圖，您應該考慮學習一些有關HTML的基本課程。 至少，您的代碼應該驗證。 使用HTML驗證程序，這將幫助您修復大量錯誤。 至少，每當您打開配對標簽時，都應將其關閉。 另一個非常嚴重的問題是您不能有超過1個<head>標簽。
這是您的布局的精簡版，可以執行您想要的操作：
.box { width: calc(33.3% - 4px); display: inline-block; border-radius: 5px; border: 2px solid #333; border: #000 border-color: #e6e600; margin: -2px; border-radius: 10%; background-color: #99ffff; } .containerr { border: px solid #FF3399; } .pic { background-size: 100% 100%; } p { font: "Courier New", Courier, monospace; color: #000000; text-align: center; } body { background-image: url(https://image.ibb.co/eV5WW9/background.jpg); background-size: 100vw 100vh; } .box { height: 15vh; display: inline-flex; align-items: center; justify-content: center } .container2 { width: 35vw; position: fixed; top: 41.5vh; left: 14vw; } .box p { font-size: calc(2vw + 10px); } .box002 { position: absolute; top: 28vh; left: 72vw; } .box002 img { width: 16vw; height: 30vh; border-radius: 50%; }
<div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" id="10"> <p name="values" data-item-index="0">1:40</p> </div> <div class="box" id="11"> <p name="values" data-item-index="7">8:10</p> </div> <div class="box" id="12"> <p name="values" data-item-index="4">5:35</p> </div> </div> <div id="2container"> <div class="box" id="10"> <p name="values" data-item-index="11">12:50</p> </div> <div class="box" id="11"> <p name="values" data-item-index="9">10:40</p> </div> <div class="box" id="12"> <p name="values" data-item-index="11">12:50</p> </div> </div> <div id="3container"> <div class="box" id="10"> <p name="values" data-item-index="0">1:40</p> </div> <div class="box" id="11"> <p name="values" data-item-index="3">4:45</p> </div> <div class="box" id="12"> <p name="values" data-item-index="2">3:50</p> </div> </div> </div> </div> </div> <div class="box002" draggable="true" id="2"> <img src="https://via.placeholder.com/75x75?text=3" draggable="true" id="slide" border="rounded" data-item-index="2"> </div>
在屏幕調整大小時自適應地更改畫布尺寸，而不會丟失光標位置跟蹤
[英]Responsively change canvas dimensions on screen resize, without losing cursor-position tracking
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.