注册 登录 充值会员 退出
毕业设计 PHP源码
充值

jQuery网格马赛克动画显示隐藏图片特效插件

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-06-26
jQuery网格马赛克动画显示隐藏图片特效插件
这是一款可以将图片以马赛克方式动画显示和隐藏的jQuery网格图像动画特效插件。


js代码

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/gridImageAnimation.js"></script>
<script type="text/javascript">
	$(function(){
		var img1 = $('.img1');
			var img2 = $('.img2');
			var img3 = $('.img3');

			$('.run-plugin').click(function(e){

				e.preventDefault();

				if ( $(this).hasClass('complete') ){ return false; } 
				
				if ( $(this).hasClass('demo1')){
					var obj1 = img1.gridImageAnimation({ 'mode' : 'fadeIn' , complete : function(){$('.demo1').addClass('complete').html('Complete');}  });
				}
				else if ( $(this).hasClass('demo2')){
					var obj2 = img2.gridImageAnimation({ 'mode' : 'fadeOut','cell' : 10,  'speed' : 80,  complete : function(){$('.demo2').addClass('complete').html('Complete');}  });
				}
				if ( $(this).hasClass('demo3')){
					var obj3 = img3.gridImageAnimation({ 'mode' : 'fadeIn', 'cell' : 30 , 'speed' : 90, complete : function(){$('.demo3').addClass('complete').html('Complete');}  });
				}

			});
	})
</script>