通過單擊頁面中的某處顯示圖像

Question

我想創建這樣的網站： https://davidgomezmaestre.com/?nav=1

當你點擊沒有按鈕的地方時，你會看到一張圖片，背景顏色也取決於圖片。

我打算用 Squarespace 創建我自己的網站，但我找不到如何做。 請幫我（：

我試圖從示例站點找到原始代碼，但實際上編碼不是我的工作，我做不到。

Answer 1

您可以通過以下方式做到這一點：

為您的圖像添加一個array ，
使用click event創建一個新元素，
將數組中的圖像插入到所述元素中。

然后通過創建 colors 的array並使用click event更改<body> CSS 來對背景顏色執行相同的操作。

 var counter = 0; var bgColor = [ "#e8dff5", // color array for background-color "#fce1e4", "#fcf4dd", "#ddedea" ]; var imgArray = [ "https://i.stack.imgur.com/GqweJ.png", //add URLs for your images here "https://i.stack.imgur.com/tFC7W.png", "https://i.stack.imgur.com/WjZch.png", "https://i.stack.imgur.com/7ALBl.png" ]; container.onclick = function(e) { //add images on click-event if (counter == bgColor.length) counter = 0; //loop background colors if (counter == imgArray.length) counter = 0; //loop images document.body.style.background = bgColor[counter]; //change background var pic = document.createElement('img'); //create new element pic.src = imgArray[counter]; //add URL for images pic.classList.add("image"); //add class name for images pic.style.position = 'absolute'; pic.style.top = e.clientY + 'px'; //place images where you click pic.style.left = e.clientX + 'px'; this.appendChild(pic); counter++; } reset = document.querySelector(".reset") //remove images on click-event reset.addEventListener('click', function() { document.querySelectorAll('.image').forEach(function(x) { x.remove(); }) })

 #container { width: 100vw; /* makes whole page clickable, make smaller if need */ height: 100vh; }.image { width: 100px; /* style your images here */ height:100px; }.reset { position: fixed; /* click to remove images */ bottom: 10px; right: 10px; z-index: 999999; /* ensure reset isn't hidden behind images */ cursor: pointer; /* indicates element is clickable */ }

 <div id="container"></div> <div class="reset">REMOVE IMAGES</div>

通過單擊頁面中的某處顯示圖像

問題描述

1 個解決方案

解決方案1
0 2022-12-28 02:10:36

通過單擊頁面中的某處顯示圖像

問題描述

1 個解決方案

解決方案1 0 2022-12-28 02:10:36

解決方案1
0 2022-12-28 02:10:36