推薦在寫動態生成標簽數據的時候，提前寫一遍html+css的結構，方便提供寫照模板

<input type="button" value="按鈕"> <style type="text/css">* {margin: 0;padding: 0;list-style: none;}ul {width: 600px;margin: 50px auto;}li {width: 100px;height: 100px;float: left;margin: 5px;}li img {width: 100%;height: 100%;position: relative;border-radius: 10px;}</style> <script type="text/javascript">var ary = ['img/01.jpg', 'img/02.jpg', 'img/03.jpg','img/04.jpg','img/05.jpg','img/06.jpg','img/07.jpg','img/08.jpg','img/09.jpg','img/10.jpg','img/11.jpg','img/12.jpg'];//獲取input標簽var btn = document.querySelector('input');//設置點擊事件btn.onclick = function(){//創建ul標簽var ul = document.createElement('ul');for (let i = 0; i < ary.length; i++) {var li = document.createElement('li');li.innerHTML = '<img src = ' + ary[i] +'>';ul.appendChild(li);}document.body.appendChild(ul);var lis = document.querySelectorAll('img');for (let i = 0; i < lis.length; i++) {lis[i].onmouseover = function(){this.style.transform='scale(1.5)';this.style.transition='all 1s linear'; }lis[i].onmouseout = function(){this.style.transform = 'scale(1)';}}}//上下的代碼結構是一樣的，只是多寫了一遍而已// btn.onclick = function() {// var ul = document.createElement('ul');// for(var i = 0; i < ary.length; i++) {// var li = document.createElement('li');// li.innerHTML = '<img src='+ary[i]+'>';// ul.appendChild(li);// }// document.body.appendChild(ul);// //獲取所有的img// var ims = document.querySelectorAll('img');// for(var i = 0; i < ims.length; i++) { // ims[i].οnmοuseenter= function() { // this.style.transform='scale(2)';// this.style.transition='all 0.5s linear'; // } // ims[i].onmouseleave = function() {// this.style.transform = 'scale(1)';// }// }// }</script>

實現效果：

總結

以上是生活随笔為你收集整理的动态创建英雄图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。