jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果，js图片分散汇聚效果素材.
1、html页面代码
<html><head><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="http://www.bokequ.com/show/demo4/css/popup.css"><title>jquery酷炫的马赛克图片还原动画效果 - bokequ.com</title></head><body><divclass="popup-container"><divclass="img-flex"></div></div><scripttype="text/javascript"src="http://www.bokequ.com/show/demo4/js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="http://www.bokequ.com/show/demo4/js/fragment.js"></script><scripttype="text/javascript">$(function() { varfragmentConfig= { 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: "微软雅黑"; } ulli{ 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-flexul{ font-size: 0; } .img-flexulli{ display: block; background-repeat: no-repeat; float: left; position: relative; }
马赛克图片js还原效果演示www.bokequ.com/show/demo4/
