推荐在写动态生成标签数据的时候，提前写一遍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>

实现效果：