jQuery马赛克图片拼接动画特效

来源:https://www.sucaihuo.com/js/2678.html 2017-08-09 22:40浏览(529) 收藏

jQuery马赛克图片拼接动画特效,一个进入页面时出现的图片3d翻牌效果。
jQuery马赛克图片拼接动画特效
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源 下载积分: 10 积分

js代码

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/jquery.flip.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
	var container			= $('#container');
	var containerHeight	= parseInt(container.height())/100;
	var containerWidth	= parseInt(container.width())/100;
	var blockCount			= (containerHeight * containerWidth);

	for(x = 1; x <= blockCount; x++) {
		
		randomNum			= Math.floor(Math.random()*4) + parseFloat(1);
		container.append('<div class="block' + randomNum + '"></div>');
	}
	
	$('#container div').addClass('black');
	
	var stack = {
		'delay': 150,
		'actions': [],
		'run': function() {
			if (stack.actions.length) {
				stack.actions.shift()();
				setTimeout(stack.run, stack.delay);
			}
		}
	};

	$('#container div').each(function(){
		var that = this;
		stack.actions.push(function(){
			$(that).flip({
				color: '#ffffff',
				speed: 70,	
				direction:'lr',
				onEnd: function() {
					$(that).removeClass('black');
				}
			});
		});
	});
		stack.run();
});
</script>
标签: 马赛克拼接
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2