jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果，js图片分散汇聚效果素材
1、html代码
1. <html>
1. <head>
1. <meta charset="utf-8">
1. <link rel="stylesheet" type="text/css" href="http://www.bokequ.com/show/demo4/css/popup.css">
1. <title>jquery酷炫的马赛克图片还原动画效果 - bokequ.com</title>
1. </head>
1. <body>
1. <div class="popup-container">
1. <div class="img-flex"></div>
1. </div>
1. <script type="text/javascript" src="http://www.bokequ.com/show/demo4/js/jquery-1.11.3.min.js"></script>
1. <script type="text/javascript" src="http://www.bokequ.com/show/demo4/js/fragment.js"></script>
1. <script type="text/javascript">
1. $(function() {
1. var fragmentConfig = {
1. container : '.img-flex',//显示容器
1. line : 10,//多少行
1. column : 24,//多少列
1. width : 1000,//显示容器的宽度
1. animeTime : 10000,//最长动画时间,图片的取值将在 animeTime*0.33 + animeTime*0.66之前取值
1. img : 'http://www.bokequ.com/show/demo4/images/9c774d91gy1g4awuk0b55j21ev0u0n4w.jpg'//图片路径
1. };
1. fragmentImg(fragmentConfig);
1. });
1. </script>
1. </body>
1. </html>
2、css样式
1. *{
1. margin: 0;
1. padding: 0;
1. }
1. body{
1. font-family: "微软雅黑";
1. }
1. ul li{
1. list-style: none;
1. }
1. .clearfix{
1. *zoom: 1;
1. }
1. .clearfix:before,
1. .clearfix:after {
1. display: table;
1. line-height: 0;
1. content: "";
1. }
1. .clearfix:after {
1. clear: both;
1. }
1. .popup-container{
1. position: fixed;
1. z-index: 9999;
1. width: 100%;
1. height: 100%;
1. background: url(http://www.bokequ.com/show/demo4/images//bg.gif) repeat;
1. overflow: hidden;
1. }
1. .img-flex{
1. position: absolute;
1. }
1. .img-flex ul{
1. font-size: 0;
1. }
1. .img-flex ul li{
1. display: block;
1. background-repeat: no-repeat;
1. float: left;
1. position: relative;
1. }
马赛克图片js还原效果演示www.bokequ.com/show/demo4/
