jquery酷炫的马赛克图片还原动画代码

maolai web前端评论531阅读模式

jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材

jquery酷炫的马赛克图片还原动画代码
1、html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="http://www.bokequ.com/show/demo4/css/popup.css">
	<title>jquery酷炫的马赛克图片还原动画效果 - bokequ.com</title>
</head>
<body>
	<div class="popup-container">
		<div class="img-flex"></div>
	</div>
<script type="text/javascript" src="http://www.bokequ.com/show/demo4/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.bokequ.com/show/demo4/js/fragment.js"></script>
<script type="text/javascript">
$(function() {
	var fragmentConfig = {
		container : '.img-flex',//显示容器
		line : 10,//多少行
		column : 24,//多少列
		width : 1000,//显示容器的宽度
		animeTime : 10000,//最长动画时间,图片的取值将在 animeTime*0.33 + animeTime*0.66之前取值 
		img : 'http://www.bokequ.com/show/demo4/images/9c774d91gy1g4awuk0b55j21ev0u0n4w.jpg'//图片路径
	};
	fragmentImg(fragmentConfig);
});
</script>
</body>
</html>

2、css样式

@charset "utf-8";
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: "微软雅黑";
}
ul li{
	list-style: none;
}
.clearfix{ 
  *zoom: 1; 
}
.clearfix:before, 
.clearfix:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
}
.clearfix:after { 
  clear: both; 
}
.popup-container{
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: url(http://www.bokequ.com/show/demo4/images/bg.gif) repeat;
	overflow: hidden;
}
.img-flex{
	position: absolute;
}
.img-flex ul{
	font-size: 0;
}
.img-flex ul li{
	display: block;
	background-repeat: no-repeat;
	float: left;
	position: relative;
}
马赛克图片js还原效果演示

 
maolai
  • 本文由 maolai 发表于 2018年9月18日 19:31:06
  • 转载请务必保留本文链接:http://www.bokequ.com/480.html

发表评论