包含四种效果的3D缩略图jquery特效,不支持IE浏览器，请使用Firefox，Chrome或其他浏览器查看。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,3D缩略图jquery特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为3D缩略图jquery特效，属于站长常用代码，更多3D缩略图jquery特效代码请访问源码搜藏JS代码频道。" />
<title>3D缩略图jquery特效_源码搜藏</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style_common.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.69142.js"></script>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/">
<strong>« Previous Demo: </strong>Responsive Layout with Smooth Transitions
</a>
<span class="right">
<a href="http://www.flickr.com/photos/ag2r/">Images by Ángelo González</a>
<a href="http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1><span>3D Thumbnail</span> Hover Effects</h1>
<h2>Adding some perspective with CSS3 and jQuery — <strong>best viewed in WebKit browsers</strong></h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</nav>
<div class="support-note"><!-- let's check browser support with modernizr -->
<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
<span class="no-csstransforms">您的浏览器不支持此3D CSS特效</span>
<span class="no-csstransforms3d">您的浏览器不支持此3D CSS特效</span>
<span class="no-csstransitions">您的浏览器不支持此3D CSS特效</span>
<span class="note-ie">对不起，您的浏览器不支持3D CSS特效</span>
</div>
</header>
<div id="grid" class="main">
<div class="view">
<div class="view-back">
<span data-icon="A">566</span>
<span data-icon="B">124</span>
<a href="http://www.codesocang.com/" target="_blank">→</a>
</div>
<img src="images/1.jpg" />
</div>
<div class="view">
<div class="view-back">
<span data-icon="A">210</span>
<span data-icon="B">102</span>
<a href="http://www.codesocang.com/" target="_blank">→</a>
</div>
<img src="images/2.jpg" />
</div>
<div class="view">
<div class="view-back">
<span data-icon="A">999</span>
<span data-icon="B">456</span>
<a href="http://www.codesocang.com/" target="_blank">→</a>
</div>
<img src="images/3.jpg" />
</div>
<div class="view">
<div class="view-back">
<span data-icon="A">999</span>
<span data-icon="B">123</span>
<a href="http://www.codesocang.com/" target="_blank">→</a>
</div>
<img src="images/4.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],
nope: 'css/fallback.css',
callback : function( url, result, key ) {
if( url === 'js/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>
<div style="text-align:center">
<p>来源：<a href="http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/" target="_blank">tympanus</a> 代码整理：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢：<a href="http://www.codesocang.com/" target="_blank">西西</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
jQuery带聚焦效果图片切换代码
HTML5鼠标经过显示带阴影效果
100种不同图片切换效果插件pageSwitch
jquery鼠标点击图片翻开切换效果
html5鼠标悬停图片动画展示效果