标签：table float time margin ati src pup oom html
马赛克动画还原：把这个代码放在一个 a.html就可以直接看到效果啦
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/popup.css"> <title>马赛克动画还原</title> <style> @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: 291px; height: 280px; background-color: rgba(0,0,0,0.85); 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; } </style> </head> <body> <div class="popup-container"> <div class="img-flex"></div> </div> </body> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://files.cnblogs.com/files/xuweiqiang/fragment.js"></script> <script type="text/javascript"> $(function() { var fragmentConfig = { container : ‘.img-flex‘,//显示容器 line : 10,//多少行 column : 24,//多少列 width : 291,//显示容器的宽度 animeTime : 5000,//最长动画时间,图片的取值将在 animeTime*0.33 + animeTime*0.66之前取值 img : ‘http://files.cnblogs.com/files/xuweiqiang/1231231.bmp‘//图片路径 }; fragmentImg(fragmentConfig); }); </script> </html>
标签：table float time margin ati src pup oom html
原文地址：http://www.cnblogs.com/xuweiqiang/p/7210614.html
