<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kort</title>
<meta name="description" content="CSS 3D thumbnail preview concept">
<meta name="author" content="Hakim El Hattab">
<meta name="viewport" content="width=800, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/kort.css">
</head>
<body>
<div class="contents">
<article>
<h1></h1>
<p align="center">适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
</article>
<div class="sharing">
</div>
</div>
<h2>Default</h2>
<div class="thumb kort">
<img src="images/200.jpg" width="200" height="200">
<img src="images/201.jpg" width="200" height="200">
<img src="images/202.jpg" width="200" height="200">
<img src="images/203.jpg" width="200" height="200">
<img src="images/204.jpg" width="200" height="200">
<img src="images/209.jpg" width="200" height="200">
<img src="images/206.jpg" width="200" height="200">
<img src="images/207.jpg" width="200" height="200">
<img src="images/208.jpg" width="200" height="200">
</div>
<h2>Concave</h2>
<div class="thumb kort concave">
<img src="images/200.jpg" width="200" height="200">
<img src="images/201.jpg" width="200" height="200">
<img src="images/202.jpg" width="200" height="200">
<img src="images/203.jpg" width="200" height="200">
<img src="images/204.jpg" width="200" height="200">
<img src="images/209.jpg" width="200" height="200">
<img src="images/206.jpg" width="200" height="200">
<img src="images/207.jpg" width="200" height="200">
<img src="images/208.jpg" width="200" height="200">
</div>
<h2>Stack</h2>
<div class="thumb kort stack">
<img src="images/200.jpg" width="200" height="200">
<img src="images/201.jpg" width="200" height="200">
<img src="images/202.jpg" width="200" height="200">
<img src="images/203.jpg" width="200" height="200">
<img src="images/204.jpg" width="200" height="200">
<img src="images/209.jpg" width="200" height="200">
<img src="images/206.jpg" width="200" height="200">
<img src="images/207.jpg" width="200" height="200">
<img src="images/208.jpg" width="200" height="200">
</div>
<footer>
<p align="center">来源：<a href="http://www.moobnn.com/" target="_blank">站长素材</a></p>
</footer>
<script src="js/kort.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>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script>
var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
jQuery缩略图悬停滑动预览.zip
版权申诉
74 浏览量
2022-11-22
17:15:31
上传
评论
收藏 93KB ZIP 举报
jQuery缩略图悬停滑动预览.zip （13个子文件） 
jQuery缩略图悬停滑动预览 
jQuery缩略图悬停滑动预览.jpg 47KB jiaoben236 css 
kort.css 4KB images 206.jpg 4KB 209.jpg 7KB 208.jpg 5KB 200.jpg 6KB 203.jpg 6KB 204.jpg 6KB 202.jpg 6KB 201.jpg 6KB 207.jpg 5KB
index.html 4KB js kort.js 3KB资源评论
