<!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>js+css3鼠标滑过图片随机切换展示效果</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>js+css3鼠标滑过图片随机切换展示效果</h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="htmleaf-content">
<div class="thumb kort">
<img src="images/1.jpg" width="200" height="200">
<img src="images/2.jpg" width="200" height="200">
<img src="images/3.jpg" width="200" height="200">
<img src="images/4.jpg" width="200" height="200">
<img src="images/5.jpg" width="200" height="200">
<img src="images/6.jpg" width="200" height="200">
<img src="images/7.jpg" width="200" height="200">
<img src="images/8.jpg" width="200" height="200">
<img src="images/9.jpg" width="200" height="200">
</div>
<h2>Concave</h2>
<div class="thumb kort concave">
<img src="images/1.jpg" width="200" height="200">
<img src="images/2.jpg" width="200" height="200">
<img src="images/3.jpg" width="200" height="200">
<img src="images/4.jpg" width="200" height="200">
<img src="images/5.jpg" width="200" height="200">
<img src="images/6.jpg" width="200" height="200">
<img src="images/7.jpg" width="200" height="200">
<img src="images/8.jpg" width="200" height="200">
<img src="images/9.jpg" width="200" height="200">
</div>
<h2>Stack</h2>
<div class="thumb kort stack">
<img src="images/1.jpg" width="200" height="200">
<img src="images/2.jpg" width="200" height="200">
<img src="images/3.jpg" width="200" height="200">
<img src="images/4.jpg" width="200" height="200">
<img src="images/5.jpg" width="200" height="200">
<img src="images/6.jpg" width="200" height="200">
<img src="images/7.jpg" width="200" height="200">
<img src="images/8.jpg" width="200" height="200">
<img src="images/9.jpg" width="200" height="200">
</div>
</div>
</div>
<script src="js/main.js"></script>
<script>
// FF OS X animates this at 3-4 FPS when there are box-shadows
// on the images, hence the hack... Ugh :/
if( navigator.userAgent.match( /firefox/gi ) ) {
[].slice.call( document.querySelectorAll( '.thumb img' ) ).forEach(function( el ) { el.style.boxShadow = 'none'; });
}
</script>
</body>
</html>
js+css3鼠标滑过图片随机切换展示效果.zip （20个子文件） 
132689969789892103 JS+css3_sjqh css 
htmleaf-demo.css 6KB style.css 4KB normalize.css 2KB related 
2.jpg 24KB 1.jpg 15KB images 8.jpg 12KB 2.jpg 12KB 1.jpg 12KB 6.jpg 13KB 3.jpg 14KB 5.jpg 18KB 4.jpg 15KB 9.jpg 11KB 7.jpg 17KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 3KB js main.js 4KB资源评论
