喜歡的jQuery小插件
阿新 • • 發佈：2017-07-20
none title posit meta for tle column logs 微軟
馬賽克動畫還原：把這個代碼放在一個 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>
喜歡的jQuery小插件