当前位置:首页 > 网页特效 > 图片代码 >

包含四种效果的3D缩略图jquery特效

时间:2013-08-27 11:46 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

包含四种效果的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>&laquo; Previous Demo: </strong>Responsive Layout with Smooth Transitions
        </a>
        <span class="right">
            <a href="http://www.flickr.com/photos/ag2r/">Images by &Aacute;ngelo Gonz&aacute;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 &mdash; <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">&rarr;</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">&rarr;</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">&rarr;</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">&rarr;</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>

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

图片代码下载排行

最新文章