以下是 3D缩略图jquery特效四种效果代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
部分效果截图3:
部分效果截图4:
HTML代码(index.html):
<!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代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码，更多{keyword}代码请访问程序员设计师联盟淘宝店JS代码频道。" />
<title>{title}_程序员设计师联盟淘宝店</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" />
<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="#" >→</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="#" >→</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="#" >→</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="#" >→</a>
</div>
<img src="images/4.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep: ['js/jquery-1.7.2.min.js', 'js/jquery.hoverfold.js'],
nope: 'css/fallback.css',
callback : function( url, result, key ) {
if( url === 'js/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Thumbnail Hover Effects</title>
<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">
<meta name="description" content="3D Thumbnail Hover Effects" />
<meta name="keywords" content="3d, 3dtransform, hover, effect, thumbnail, overlay, curved, folded" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<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/style2.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="#/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 href="index.html">Demo 1</a>
<a class="current-demo" 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">CSS transforms are not supported in your browser</span>
<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
<span class="note-ie">Sorry, only modern browsers.</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="#/photos/ag2r/5033654303/in/photostream">→</a>
</div>
<img src="images/5.jpg" />
</div>
<div class="view">
<div class="view-back">
<span data-icon="A">210</span>
<span data-icon="B">102</span>
<a href="#/photos/ag2r/4846704157/in/photostream">→</a>
</div>
<img src="images/6.jpg" />
</div>
<div class="view">
<div class="view-back">
<span data-icon="A">690</span>
<span data-icon="B">361</span>
<a href="#/photos/ag2r/5439506585/in/photostream">→</a>
</div>
<img src="images/1.jpg" />
</div>
<div class="view">
<div class="view-back">
<span data-icon="A">987</span>
<span data-icon="B">130</span>
<a href="#">→</a>
</div>
<img src="images/3.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep: ['js/jquery-1.7.2.min.js', 'js/jquery.hoverfold.js'],
nope: 'css/fallback.css',
callback : function( url, result, key ) {
if( url === 'js/jquery.hoverfold.js' ) {
$( '#grid' ).hoverfold();
}
}
});
</script>
</body>
</html>
JS代码(jquery.hoverfold.js):
( function( $ ){
$.fn.hoverfold = function( args ){
this.each( function(){
$( this ).children( '.view' ).each( function(){
var $item= $( this ),img= $item.children( 'img' ).attr( 'src' ),struct= '<div class="slice s1">';
struct+='<div class="slice s2">';
struct+='<div class="slice s3">';
struct+='<div class="slice s4">';
struct+='<div class="slice s5">';
struct+='</div>';
struct+='</div>';
struct+='</div>';
struct+='</div>';
struct+='</div>';
var $struct = $( struct );
$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image','url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
}
);
}
);
}
;
}
)( jQuery );
CSS代码(style1.css):
.view:hover .s2{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,-45deg);}
.view:hover .s3,.view:hover .s5{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,90deg);}
.view:hover .s4{-webkit-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);-moz-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);-o-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);-ms-transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);transform:translate3d(59px,0,0) rotate3d(0,1,0,-90deg);}
.view .s1 > .overlay{background:-moz-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(right,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);}
.view .s2 > .overlay{background:-moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);background:linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);}
.view .s3 > .overlay{background:-moz-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:-webkit-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:-o-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:-ms-linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);background:linear-gradient(right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);}
.view .s4 > .overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(left,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);}
.view .s5 > .overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-webkit-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(left,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);}
CSS代码(style_common.css):
.view{width:316px;height:216px;margin:10px;float:left;position:relative;border:8px solid #fff;box-shadow:1px 1px 2px rgba(0,0,0,0.05);background:#333;-webkit-perspective:500px;-moz-perspective:500px;-o-perspective:500px;-ms-perspective:500px;perspective:500px;}
.view .slice{width:60px;height:100%;z-index:100;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;-webkit-transition:-webkit-transform 150ms ease-in-out;-moz-transition:-moz-transform 150ms ease-in-out;-o-transition:-o-transform 150ms ease-in-out;-ms-transition:-ms-transform 150ms ease-in-out;transition:transform 150ms ease-in-out;}
.view div.view-back{width:50%;height:100%;position:absolute;right:0;background:#666;z-index:0;}
.view-back span{display:block;float:right;padding:5px 20px 5px;width:100%;text-align:right;font-size:16px;color:rgba(255,255,255,0.6);}
.view-back span:first-child{padding-top:20px;}
.view-back a{display:bock;font-size:18px;color:rgba(255,255,255,0.4);position:absolute;right:15px;bottom:15px;border:2px solid rgba(255,255,255,0.3);border-radius:50%;width:30px;height:30px;line-height:22px;text-align:center;font-weight:700;}
.view-back a:hover{color:#fff;border-color:#fff;}
.view-back span[data-icon]:before{content:attr(data-icon);font-family:'icons';color:#aaa;color:rgba(255,255,255,0.2);text-shadow:0 0 1px rgba(255,255,255,0.2);padding-right:5px;}
.view .s2,.view .s3,.view .s4,.view .s5{-webkit-transform:translate3d(60px,0,0);-moz-transform:translate3d(60px,0,0);-o-transform:translate3d(60px,0,0);-ms-transform:translate3d(60px,0,0);transform:translate3d(60px,0,0);}
.view .s1{background-position:0px 0px;}
.view .s2{background-position:-60px 0px;}
.view .s3{background-position:-120px 0px;}
.view .s4{background-position:-180px 0px;}
.view .s5{background-position:-240px 0px;}
.view .overlay{width:60px;height:100%;opacity:0;position:absolute;-webkit-transition:opacity 150ms ease-in-out;-moz-transition:opacity 150ms ease-in-out;-o-transition:opacity 150ms ease-in-out;-ms-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;}
.view:hover .overlay{opacity:1;}
.view img{position:absolute;z-index:0;-webkit-transition:left 0.3s ease-in-out;-o-transition:left 0.3s ease-in-out;-moz-transition:left 0.3s ease-in-out;-ms-transition:left 0.3s ease-in-out;transition:left 0.3s ease-in-out;}
分享到QQ
分享到微博
微信扫一扫
