<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+CSS3 3D立体图片排列布局代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="blocks">
<div class="block">
<div class="overlay">
<img src="img/video-play-icon.png" alt="Play" />
</div>
<img src="img/computergraphics-album-covers-2014-15.jpg" alt="Image" />
</div>
<div class="block">
<div class="overlay">
<img src="img/video-play-icon.png" alt="Play" />
</div>
<img src="img/Octoberrust.jpg" alt="Image" />
</div>
<div class="block">
<div class="overlay">
<img src="img/video-play-icon.png" alt="Play" />
</div>
<img src="img/Disclosure-Holding-On-ft-Gregory-Porter.jpg" alt="Image" />
</div>
<div class="block">
<div class="overlay">
<img src="img/video-play-icon.png" alt="Play" />
</div>
<img src="img/chance-the-rapper-best-artwork.jpg" alt="Image" />
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Below code only for demo purposes
// You can remove the `&.hover,` class from the CSS
// if you don't need it
$(document).ready(function() {
var count = 0;
var blocks = $(".block");
var testEffect = setInterval(function() {
$(blocks[count - 1]).removeClass("hover");
$(blocks[count]).addClass("hover");
count++;
if (count > 4) clearInterval(testEffect);
}, 800);
});
</script>
</body>
</html>
jQuery+CSS3 3D立体图片排列布局代码.zip （9个子文件） 
js 
jquery-1.11.0.min.js 94KB img 
Octoberrust.jpg 29KB
video-play-icon.png 25KB computergraphics-album-covers-2014-15.jpg 42KB Disclosure-Holding-On-ft-Gregory-Porter.jpg 31KB chance-the-rapper-best-artwork.jpg 37KB css style.css 2KB normalize.css 2KB
index.html 2KB资源评论
