我有一個代碼可以將影像粘貼到另一個影像上，并在向上箭頭鍵按下時增加影像的大小，反之亦然在向下箭頭鍵按下時。
這是我的代碼：
<!DOCTYPE html>
<html>
<body>
<img id="imgdisplay" width=960 height=540 src="../static/black_background.png" onclick="clickEvent(event);">
<img id="circle" src="../Different Sizes/red_circle_80.png" style="display:none;" onclick="clickEvent(event);">
<p id='X'>0</p>
<p id='Y'>0</p>
<script>
var size = 80;
</script>
<script>
var x = 0;
var y = 0;
function clickEvent(event) {
var thecircle = document.getElementById('circle');
x = event.clientX
y = event.clientY
document.getElementById('X').innerHTML = '' x;
document.getElementById('Y').innerHTML = '' y;
var pastex = x - (circle.width / 2);
var pastey = y - (circle.height / 2);
thecircle.style = `position: absolute; top: ${pastey}px; left: ${pastex}px; display: block; overflow: hidden;`;
}
</script>
<script>
document.onkeydown = function(event) {
var thecircle = document.getElementById('circle');
event = event || window.event;
if (event.keyCode == 38) {
size = 100;
thecircle.src = `../Different Sizes/red_circle_${size}.png`;
clickEvent({'clientX': x, 'clientY' : y})
} else if (event.keyCode == 40) {
size -= 100;
thecircle.src = `../Different Sizes/red_circle_${size}.png`;
clickEvent({'clientX': x, 'clientY' : y})
}
};
</script>
</body>
</html>
問題是如果我只點擊背景影像的邊框，圓圈會溢位，一半的圓圈會伸出背景。當我單擊邊框并多次單擊鍵盤上的向上箭頭以放大圓圈時，它會更加突出。
如果圓圈已經幾乎伸出背景，我將如何限制圓圈不會伸出背景并且不讓用戶放大圓圈？
我在影像中的意思是。
我目前擁有的但不是我想要的：
我想要的（限制它不突出黑色背景影像）：
我該怎么做？
任何幫助表示贊賞！
uj5u.com熱心網友回復：
這是我正在談論的解決方案。一個缺點是這不考慮滾動，但如果這對您的情況來說是一個問題，那應該是一個微不足道的修復。
var size = 80;
var x = 0;
var y = 0;
function clickEvent(event) {
var thecircle = document.getElementById('circle');
x = event.clientX
y = event.clientY
var box = document.getElementById('imgdisplay');
if (x > box.x box.width - circle.width / 2){
x = box.x box.width - circle.width / 2;
}
if (y > box.y box.height - circle.width / 2){
y = box.y box.height - circle.width / 2;
}
if (x < box.x circle.width/2)
x = box.x circle.width/2;
if (y < box.y circle.width/2)
y = box.y circle.width/2;
document.getElementById('X').innerHTML = '' x;
document.getElementById('Y').innerHTML = '' y;
var pastex = x - (circle.width / 2);
var pastey = y - (circle.height / 2);
thecircle.style = `position: absolute; top: ${pastey}px; left: ${pastex}px; display: block; overflow: hidden;`;
}#imgdisplay{background:black}
#circle{width:80px;height:80px;background:red;border-radius:40px;}<img id="imgdisplay" width=500 height=300 src="../static/black_background.png" onclick="clickEvent(event);">
<img id="circle" src="../Different Sizes/red_circle_80.png" style="display:none;" onclick="clickEvent(event);">
<p id='X'>0</p>
<p id='Y'>0</p>uj5u.com熱心網友回復：
你的問題是圓的位置是絕對的，而不是相對的。看看我的例子，它有效。
<!DOCTYPE html>
<html>
<head>
<style>
.container{
z-index: 90;
overflow: hidden;
width:450px;
height: 540px;
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgICAgICAgHBwcHBwoHBwcHBw8ICQgKFREWFhURExMYKDQgGBolJxMfITEhJSkrLjouFx8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAKgBLAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAHxABAQACAQQDAAAAAAAAAAAAAAERITECQVGhYYGR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOGigIqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALMZ3mT4maIAAAoACKgAoCCoANdOO6AgoCAAAACoAAAAACggAAAAAAAAAAAAAKEAEUAAAAAKFBAAAAAAVAAAAVFBAAAUEBQQAAAAAAAAAFAAAAAAAARUBUAFBAFEAAABQBAAAAAAAAAAAAAAAAAFWTN8IAAAAAAAgoCCoAKgAACoAAAAAAAAAAAAAAAAAAAAAoAAAAAAACKgAoAX9AEFAQAAAAVAAAXW/SAAAAAAAAAApLi5hdggAKAAAAAAgoIACgAgAAAAAAAAtxrGeN58oAAACggAAAAAAAKgAAAqLUAABRAAAAXPpAVAAAAAAAAAAVAAAAAAAAAAAAAAABUAAAAAAABbcoAAAqAAAAKCAoIAAKgAAC7Rrp6rJZO/IMgAAAAAAAAAAAAAAAAACoAAAAAAAAAAAAAAAAAAAAAAAC0EVFnPn4vcEFvP2gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKgAAA/9k=");
}
#circle{
display: inline-block;
overflow: hidden !important;
display: none;
max-width: 100%;
max-height:100%;
z-index: 1;
}
</style>
</head>
<body>
<div class="container" onclick="clickEvent(event);">
<!-- <img id="imgdisplay" width=960px height=540px src="" onclick="clickEvent(event);"> -->
<img id="circle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAilBMVEX////u7u7t7e0AAAD39/f5 fn09PT /v7v7 /y8vL7 /u/v7/j4 PPz8/CwsJhYWEqKipaWlrb29s4ODhzc3NNTU0lJSWzs7NCQkKLi4uampp6enpoaGgPDw9YWFjm5uYdHR2ioqKCgoIxMTGpqalQUFAXFxcgICDLy8s Pj63t7eTk5OBgYFGRkaUF5DaAAAQ6klEQVR4nO2dCXOqOhTHQ0xYArjg7rW1Lu21r/X7f70HmnMSEBA0UujczLw3c1P4k59ZzslOCATbksHDKFfGUAYxDoUoAVEco1opZRFzWv8I/xF2nTB iibh1xKKOJwF1Ac5S56j3SWM88tN3nNikk04X 4mk8FgMBrF/1uvJ7vVvL xPCYIs51bUi0kpNRyeZzwyD sJotecVhMVgd/0xQhlUGvPDJoWhA0LQj4HmMOC6LldPhSAqfC2366jYJYUFxLGUiVDYFxCBiFMew6qvC95Lv cvRRCU6Fl/VyzpL6Wq5eP1UEMpNywBeY51hBmIyiLv6SHkTZGJX8rEJEq1lNOBWG8/CSC9RcquoRWpoWvKi0PIdFf6bVSmZhVr4vk/JKqbFUmSQMt OH6CCMtxERl9xoE HGn5Ym 2N8ek9MxSgO0 l4WFpPX6ZzKmzaJsLNsrjy7ddbvx9GG /yBeE4jNEgCvv9w3pf NZsSQlvBWFSp/uvuYkcrperKGk5HK4 eJFyXRea/2i1K2h4R33OxX2pMkdIXS78PL7hdBtsBOG2lzg35VLEDqLtNK8QvPd/kjCpJZZw jkuy/TQBynZKN6QcmPPTRy3OTX5s187VVCyMA4CFzJwjIIYwa6j7PgfTPhXfLPRweUXT7uOlOfFrgL3DoOrrPz0BakplahhlFZUrv0j68o/Iin/KFhnk7OYR/dJnQP3BAkOVyZnHcZ5U1fq2gGs7 NudpmUnL7cO6UwWXHFjiGXWcg/AbFrS8lwLyEX22GGb 7dJ5VJFrVshx7f0 LDLb9D6n7CuMgcMw3o5EjEPVK5yUqKVpgpIadjg4RUWMvU198mnmDGx2m8SbqUfHlNEbokOqVrSUTOHpZhwrgl 5P6ziJohJDaPF1 vgNphZ4x1uamGVeiAUIRpDJwFKlu2hMICUm3OVNmdhQjx/KQuf7BWb/q0MO9Riz2A Z/tS9 zHNGMcqlXAjckUFYMsaCGIfJCMa 0nVfuLHDJQOxakjFgcB7HsTkSsVNTuqj3zapI XU8Usp9wbap4b9pIHRRzGqS1lF3ZR8qVB3AQZeLakahC6PUhkoHzRHWCZ10D8d1JGqTugSX2 5Q HSW8kySEhCzcf/8J9B6JKVXhkcfKohQiJ0w7EyT gS7QMzv2KyDBIKi/jaUMDSMUzoEq2jtN9UTpZBQuryYK8SMTFLKJjmaO9EjWQZJIxNvF5SB8qqlxOiZdS0IGCyHM1KbKUWPGTXk2IQow89VJWyhebyr/HFUinCbgehA/pV3nhaEOQ/lZQR4RVeUaiFszwuU4D7EPyvUlerSIrWnsa6lgr/arlYR6rQXXaJqoN/I3Byf3AeP1SDVYPbUrf7FnorOhbk3mSZnDCnyoebOA8T6nbw1W3HWgx7ozpwy0cJdU/mXbRktQnl9BNTtXqMkDLli06dh5JlkDC2kpbKRf8RQkuo3sR482CyDBJaFttgXfwIqvfxr7SYp1pRUSdZ11L3L vIlaI2VS2qV9b WQT7wjZ0jz3sMStDuI9kJHbaBbzH4T2llSOF3XGGH3xMSkR7tBn4UI6UW ZqETV6EEqjqvK8ptemygXEPCwVYuq y6SKPW8q1KCTD Wgvrsso0x43lkp5cDNS6SKCe0ABbb4VKsICbrhH6xYqpDQ5dgg70wmy6SU6kxNRW1CSnBkey/aSmgLbG1WdQmpsoQzajZZJqVYgAMbQU1CTzkNvulkGZSiHH2uhVePUFXib PJMimldQy ighzLQ8/4k/jyF rffbwLGUJHEc95kuR/GUMOOETCu 86AJCpaUbOSsi8CHTUsrwn7idJ6VQwQNMxgu2mPWXhvVOZ5Ka80tLpLB/tyWV xYbmF4eXuRavhsBuhnDwKtKiKawz56WLINSWE7XpBJhbGRU80S7QKh6CCG5ksrLQwFDTzPPfmKyDEp5MMC4rpKHVKAR7YMNajuhmnoPr6SuCV0HDMyoM/ueCAHrdiolPMdR3le/h3tvHuY08U VYuih9LNSFsnuXkAf4ZuIe3c91NmeYUYKnbdPuWFDvXflH2EtDJihCaNzeLaUi5nIs14bZCZowSTFH0Kf5S4/RQoy8Z1npLKEUAvfIq BZBmUit4wE8sJIQsn5Mby87YRkgmaAFpGuMFaaDeSLINSNiSd2mWE0PGdnIcyOkWImbhMHi0i3MBQ ZE1lCyDUuCAz6hXTAim4kSaSpZJKXBs5vGzRaMYsKVjzp869PAkKXBspiRlDzHY1IN8HstX7l4UCjEG1pfWkZJd4ZeoYKUCdWDwYimjuuJ5yx0EDrST2yLPm8FwgHtDq52EaqZlzPMJbRjmXjSZLJNSOGKzySfEeY75ba1WElKhqlk oWxJZ1FHCS03kPb8XYgcQhbJXdiDZpNlUIoSOS3/EuYR4sjqqrOEljhgRcsjBI9NyZtbbteQlAeLR6bK2uKpEYzAHx88NaL SIVBKQ5eGREQQzDLwSc9KKew7qkR8J6BAyjulMIZF19F4XvgEPRLCNvteSdR4JsuMQr7Fmx0 dOw WQZlLKFbE3U6DcQujAjPu00oQfdo5cgS4gu27bbhNh7QLeFwGtQDYNuE2o5lSHUcrfThFjblGcGzwyxht59PsPdyTIpZWOLiXGXSX9wSpfk/vMZKi09eLYUTGC/bZxLFICCvV/xpoceTEuBe 3baSlwWSPbxAIKqFg/IQVNzeGyBgE9byAXXtcJwb9eycoMz8CAMWnFgZUmCCcilYdczovuY/CuE 4vKIt0KWUSfP0LCGEpiZcihImb7S8ghEbTsnVCmFXzRfcJYZJ3w3RCGM/v2z9jxExKAaGc0b/sz Cw5CYkZo56MHhqRF0pnH2ZE3VqBIXttR9Jn8PUUQ8/JOVGH2AQZZ4nQUhn7rx9q9N9i6QvLzsRuxShNPgn7xcQwiTbRCOkMAeebKLsOqHFTmDbdUI5Gj76sWQZlIIxU gD/zpCSkYlhINfQGiJDOHZKjqjFCGEDq3c06SyhJeTFUZQSp976EMjIQMjOaEeCtr8hJFxKYBxdCkktLrfA1YtzTk6Q5hE/mrCKf 1eSj7xSf2Cwi5XN8mB2rkM9JrG1O3 4RUem0TRyeUfYth8AsI4UCJXSoPV9A/NEMIUT8ihf3Dixsk 8HYx/eeetRDE1I4IjMX2qkRuFEm2XLS7KJQ41I2sMAeqHPu2jjWRrrueaudaXB9zUXakrHb7hPighNQk/VYxn7/AkIY84aG6PIMk/MWw19AuL gLODVyzMC5566Tmjh3BM8JwlXv4SQekJrUjRChnPAXSfE5SYH1LpYIpzH77o95FAa8Rz y4IFZyM3t 1IE0c9PFEKtm59BPJVpJdD4SMjKxVk1E9IwV77ITyH7w0A3e123yLA1eo0Q4gr3uyOE0qOpZMlxBVvTrcJVU5ZGULI3SnpNuEUa1uWEGroTNgVtdpJCC0mgxfxPdwge QVtdpIiJP4WA01QrD5aulpd06NUO Bb ajw4OnRghYNDRVmxeefNTDM6RwvwW qO0tgT966EV1b 6J9sDeq2BhBsNo1EFAVPc8b3BK0e3WCUUo7cWIVNFqJyHuXdPOrlGEcEjbDExJ9wgjuZ9kqpk8fT8 bhSGM1o7Rwgt6bKAEIYUx S2VjsJYR9wwPIJOT5gd5MQjuEZs6ITeHCjMGxw7xghVjOuE qWBzZdjJseejAjZUEZDL2CUyOU0ZdjHN1aX4pnV0/zpWIfVz3zfonqludN4NhcX5dKn0jn4VHuYfcIcfvobFNMiCtp5crFLhFSHLZfpqQypwriLNtl4qZLhOqAdVpGiOv6LpnYIUJcItt7TUtlT4bk6ry2bhG66ry2ckILFqP0/nSKkOKZe68ZqatbOtXRl26XVu6pc3P9K6nMmIAQn5iJ3Tk1QpBvmeqFyL53fSY7ZuKRdefUCHV 6aV4lt/gAa7Bu3qo9Z43tB4Lx81K5RDi74GnKbWckAq8rcSHx8pvDoDFDH 9rFY7CdW9QWtxLZVDqE4A/ oEIVUXOQSoXp6H6i65MK3VSkLKsG3cVb3fwoO9Ub1xBwg9grcAbCrf4KHuRlgVJ vBJt6UFHXwzPltrhTJXS/A8VLHkDRx1MMDUgJbjdd8KYWa8o/wHp3YwDx16OFhKUfdUcJr3dKJWT9JbuNrseeN98wsSa5U4e2ANv40PqctJsQD1k WV48Q1zT0PmIj01pCdd9TdLmmqgahur5lL y2Eqo7u3bn5rceIcM7rf6IlhI6WAlPwi2QKrul08YSoI53axOhpcz228Yukiq9h1Tdf/hfCwmpamXO51tXILy2PN8ogbebtMceOuoOyy9SJoX7M67PZ7BtvIf0byhadmqEdnn1gJVIOcV3WCblQN0lO6PnlS3tOTVCqAvIPVYmVUroaPZmfK7Mrelb6PcBc6tM6gahVptPya0KbSF0tTudBS2VukWIk/ 93mdcUFtC6OLdfr1VMuD9EKEaIuidNrwdhKm71d0bUrcJ8aCzZPZblGk1REgE1sHe5Dx6 CAhLjRKWtSwTKsRQupEqhWV14qVE6JlLFkjhyNTsV1ELXio2ZV7Fgn3mJoBc29LVTkmguOsYi9x4J575sONoDXuvYEjqryBoWSWx9NyMVlRdYerZWjuCQ/RPQPWkyp1l7lWF5POFP0hz1tdU52s5BZVpEr7FqlkqRa1N4yE yOEgaqCyfhRJanqhI6yi70Xn7g/QOi/aAUpLveGCbVhjZ62fbEpQsodrYT2VpVHAOsQEv9DfWJxfR/mMwldES7Uxz/8xNA/gVDdynb5GRsjjF/60j8dnM1/fUKIK0mWpzWpvXFYmKwKUtX3W8TWuz/Uvjvw5Ex2RULsC1c5n4HY3/pv RUTPP/UCEHTH2XMqiHl1lzJaZO5Vhl7f eEVfParqWqrS NM W/mfbFNzX1XlGqiueddpfZVP9F349KyrznHRfE47v udNG1JWqT0iEbjZiy4T6xgk9EqQKaG XeIzPJ4x9i0WaMXoGIbVF9Cf1nVOUNFiNEBI71Xj33ia2cUImgvVH6itL62IkGiEkJHpNfb036SfNgzFCQY6T9Adej3IKuylCwrfDdBJOR rYFjVCaM0/0 LDreB3/lh3E8atwDqdit54GZBkDuhRQnc5zijvNvcXhweMmEfCLGNvvI0hvUfsYTRfZEXXwX1SkIgHjnogIjxlkzMbHWJCbteUOi a4HQ1mGUFF/550cXdB1Ao1DuPeuh/ZpPU6023R0Fih6uKFMWhh N2ei216Dsiqdx3H0BRr2 RqyX679cJ682m2yjQikru0uWkgNk2JyIIttNhjsqrL7hL70mVUULO 6Oc1MXduNFuBdcuJdNe5wxTY1/2WcKJVsv1S 77r30D3RQDhLEWJ5vlVf3BsF9v/X4YBZTxxNCdfxVvE4X9 Wq9L3xrtqQPpsokYexhOXQ zc8JyNDh DQdxWEQ//d Gn UPdyb pvHU2WSMGkJBIm2WTt2XxhvQ0OpMkmY1LG49AXL99KcvBlepn8iph2vYpQwx1rQOloXUyzCeU6jXzHMVpEQjNLrAZG7U6VOjTB11MN5uaNf1DyWZN56mWwGYY9tz8h571kTRiKItoPx222yBG44WEaBINosisFU3e95w4tlk34b/7CaXPmZWlhMVgc/tpmxA2RRg8s6jPQtqhA6NnN47FVuYtu3m6wHcYjNxWAwmeyW83ATl7PkE8ySPcsOEsZSSWTimWE4i6aWJz93OvnphNdSZ3fUamxZxw8QNiz1j/AfYfsJ/wdtCtsqAeJS2AAAAABJRU5ErkJggg==" onclick="clickEvent(event);">
</div>
<p id='X'>0</p>
<p id='Y'>0</p>
<script>
var size = 80;
</script>
<script>
var x = 0;
var y = 0;
function clickEvent(event) {
var thecircle = document.getElementById('circle');
x = event.clientX
y = event.clientY
document.getElementById('X').innerHTML = '' x;
document.getElementById('Y').innerHTML = '' y;
var pastex = x - (circle.width / 2);
var pastey = y - (circle.height / 2);
thecircle.style = `position: relative; top: ${pastey}px; left: ${pastex}px; display: block; overflow: hidden;`;
}
</script>
<script>
document.onkeydown = function(event) {
var thecircle = document.getElementById('circle');
event = event || window.event;
if (event.keyCode == 38) {
size = 100;
thecircle.src = `../Different Sizes/red_circle_${size}.png`;
clickEvent({'clientX': x, 'clientY' : y})
} else if (event.keyCode == 40) {
size -= 100;
thecircle.src = `../Different Sizes/red_circle_${size}.png`;
clickEvent({'clientX': x, 'clientY' : y})
}
};
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/488399.html
標籤：javascript html css 图片 限制