素材网 素材网

jQuery产品图片或品牌LOGO点击按钮换一批动画插件

下载资源()次

阅读次数()次

发布时间:2017-01-05

jQuery产品图片或品牌LOGO点击按钮换一批动画插件
分享到:

用法简介:

来源:xw素材网

jQuery产品图片或品牌LOGO点击按钮换一批动画插件 。
文件引用:

<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>


   

相关标签:

上一篇:jQuery下拉滚动页面底部数字自动增加动画效果 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。