JavaScript實現許願牆效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body p { margin: 0; } .paper { position: fixed; left: 200px; top: 200px; width: 200px; height: 200px; padding: 20px; background: yellow; border-radius: 5px; box-sizing: border-box; cursor: pointer; } .close { display: block; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 5px; right: 5px; text-align: center; background: #008c8c; } .inpWords { width: 300px; height: 50px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; padding: 20px; position: fixed; left: 0; right: 0; margin: auto; bottom: 10px; line-height: 50px; font-size: 20px; } </style> </head> <body> <div> <!-- <div> <p>Lorem ipsum dolor sit amet.</p> <span>X</span> </div> --> <input type="text" placeholder="許個願吧"> </div> <script> var paperWidth = 200, paperHeight = 200; //願望簽的寬度和高度 var zIndex = 1; //願望簽層疊關系值 var viewWidth = document.documentElement.clientwidth, //記錄初始化時瀏覽器可視窗口的寬度 viewHeight = document.documentElement.clientHeight; //記錄初始化時瀏覽器可視窗口的高度 var hope = document.querySelector(".inpWords"); var wall = document.querySelector(".wall"); hope.onblur = function () { //輸入框失去焦點，創建願望簽 createHope(hope.value); } hope.onkeydown = function (e) { //按下回車鍵也可以創建願望簽 if (e.key === "Enter") { createHope(hope.value); } } window.onmousedown = function (e) { //為願望簽注冊鼠標事件 var divHope = getHopeDiv(e.target); //獲取到點擊的願望簽的dom對象 if (!divHope) { //點擊的不是願望簽 return; } divHope.style.zIndex = zIndex; //拖拽的願望簽可以覆蓋其他願望簽 zIndex++; var div = window.getComputedStyle(divHope); var hopeLeft = parseFloat(div.left); var hopeTop = parseFloat(div.top); var pageX = e.pageX; var pageY = e.pageY; window.onmousemove = function (e) { //移動願望簽 var disX = e.pageX - pageX; var disY = e.pageY - pageY; var newLeft = hopeLeft + disX; var newTop = hopeTop + disY; //願望簽移動的邊界限制，不能超出瀏覽器視口 if (newLeft < 0) { //最左 newLeft = 0; } if (newLeft > document.documentElement.clientWidth - paperWidth) { //最右 newLeft = document.documentElement.clientWidth - paperWidth; //瀏覽器視口寬度 - 願望簽寬度 } if (newTop < 0) { //最上 newTop = 0; } if (newTop > document.documentElement.clientHeight - paperHeight - 80) { //最下 newTop = document.documentElement.clientHeight - paperHeight - 80; //瀏覽器視口高度 - 願望簽高度 - 底部許願輸入框占用的一定高度80 } divHope.style.left = newLeft + "px"; divHope.style.top = newTop + "px"; } window.onmouseup = window.onmouseleave = function () { //鼠標按鍵抬起或離開願望簽，願望簽不在移動 window.onmousemove = null; } } //注冊點擊關閉願望簽事件 window.onclick = function (e) { if (e.target.parentElement && e.target.parentElement.className === "paper" && e.target.tagName === "SPAN") { e.target.parentElement.remove(); } } //願望簽的位置隨着瀏覽器可視窗口大小改變 window.onresize = function () { var viewDisX = document.documentElement.clientWidth - viewWidth, //記錄瀏覽器可視寬度的改變量 viewDisY = document.documentElement.clientHeight - viewHeight; //記錄瀏覽器可視高度的改變量 //所有的願望簽都要重新調整位置 for (var i = 0; i < wall.children.length; i++) { var hope = wall.children[i]; var left = parseFloat(hope.style.left); //獲取瀏覽器尺寸改變前，願望簽左上角距離瀏覽器左邊邊界的距離 var right = viewWidth - paperWidth - left; //獲取瀏覽器尺寸改變前，願望簽右下角距離瀏覽器右邊邊界的距離 var newLeft = left + left / (left + right) * viewDisX; //新的left值 等於之前的left值+按比例變化的值 hope.style.left = newLeft + "px"; var top = parseFloat(hope.style.top); //獲取瀏覽器尺寸改變前，願望簽左上角距離瀏覽器上邊邊界的距離 var bottom = viewHeight - paperHeight - top; //獲取瀏覽器尺寸改變前，願望簽右下角距離瀏覽器下邊邊界的距離 var newTop = top + top / (top + bottom) * viewDisY;//新的top值 等於之前的top值+按比例變化的值 hope.style.top = newTop + "px"; } viewWidth = document.documentElement.clientWidth; //將當前瀏覽器可視寬度覆蓋之前的值 viewHeight = document.documentElement.clientHeight;