懒人之家--可能是JS网页特效代码收集最全的懒站!

jQuery仿天猫商品品牌图片墙换一批动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-04-03
一款仿天猫商品品牌图片墙换一批jQuery动画特效代码。


js代码

<script type="text/javascript">
	window.onload = function () {
		var clickTimes = 1;

		//总列数
		var lineCount = 6;

		var btnRefresh = document.querySelector("#btnRefresh");
		var iconRefresh = document.querySelector(".iconRefresh")

		var img3DList = document.querySelectorAll(".img-3d");
		var len = img3DList.length;

		btnRefresh.onclick = function () {
			iconRefresh.style.transition = ".3s linear";
			iconRefresh.style.transform = "rotate("+360*clickTimes+"deg)";

			for (var i = 0; i< len; i++){

			  var colNum = parseInt(i/lineCount);
			  var rowNum = i%lineCount;
			  var delayTime = (colNum+rowNum)*100;


				img3DList[i].style.transition = ".3s "+delayTime+"ms linear";
				img3DList[i].style.transform = "rotateY("+180*clickTimes+"deg)";
			 }

			clickTimes++;
		}
	}
</script>