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

作者 : 小刺猬 本文共749个字,预计阅读时间需要2分钟 发布时间: 2020-08-4 共401人阅读

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

一款仿天猫商品品牌图片墙换一批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>
VIP免费 永久VIP免费

已有0人支付


刺猬源码 » jQuery仿天猫商品品牌图片墙换一批动画特效

刺猬QQ交流群号多少?
363432

发表评论