jquery酷炫的馬賽克圖片還原動畫代碼
jquery酷炫的馬賽克圖片還原動畫代碼,jquery馬賽克圖片動畫,js酷炫圖片代碼,馬賽克圖片js還原效果，js圖片分散匯聚效果素材
1、html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/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;
}
浙公網安備 33010602011771號