Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

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>