以下是 jQuery+CSS3方向感知悬停效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Direction-Aware Hover Effect with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Direction-Aware Hover Effect with CSS3 and jQuery" />
<meta name="keywords" content="hover, css3, jquery, effect, direction, aware, depending, thumbnails" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<!--<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />-->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<style>
.da-thumbs li a div {
top: 0px;
left: -100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.da-thumbs li a:hover div{
left: 0px;
}
</style>
</noscript>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/SlideshowJmpress/">
<strong>« Previous Demo: </strong>Slideshow with jmpress.js
</a>
<span class="right">
<a href="http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<span>Tips & Tricks</span>
<h1>Direction-Aware <span>Hover Effect</span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Default</a>
<a href="index2.html">Delay</a>
<a href="index3.html">Inverse</a>
</nav>
<p>Moving from one thumb to the other will immediately trigger the sliding of the info box.</p>
</header>
<section>
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="#/shots/505046-Menu">
<img src="images/1.jpg" />
<div><span>Menu by Simon Jensen</span></div>
</a>
</li>
<li>
<a href="#/shots/504336-TN-Aquarium">
<img src="images/2.jpg" />
<div><span>TN Aquarium by Charlie Gann</span></div>
</a>
</li>
<li>
<a href="#/shots/504197-Mr-Crabs">
<img src="images/3.jpg" />
<div><span>Mr. Crabs by John Generalov</span></div>
</a>
</li>
<li>
<a href="#/shots/503731-Gallery-of-Mo-2-Mo-logo">
<img src="images/4.jpg" />
<div><span>Gallery of Mo 2.Mo logo by Adam Campion</span></div>
</a>
</li>
<li>
<a href="#/shots/503058-Ice-Cream-nom-nom">
<img src="images/5.jpg" />
<div><span>Ice Cream - nom nom by Eight Hour Day</span></div>
</a>
</li>
<li>
<a href="#/shots/502927-My-Muse">
<img src="images/6.jpg" />
<div><span>My Muse by Zachary Horst</span></div>
</a>
</li>
<li>
<a href="#/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<a href="#/shots/502523-App-Preview">
<img src="images/8.jpg" />
<div><span>App Preview by Ryan Deshler</span></div>
</a>
</li>
<li>
<a href="#/shots/501695-Cornwall-Map">
<img src="images/9.jpg" />
<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
</a>
</li>
<li>
<a href="#/shots/500861-final-AD-logo">
<img src="images/10.jpg" />
<div><span>final AD logo by Annette Diana</span></div>
</a>
</li>
<li>
<a href="#/shots/500369-Land-Those-Planes">
<img src="images/11.jpg" />
<div><span>Land Those Planes by Lee Ann Marcel</span></div>
</a>
</li>
<li>
<a href="#/shots/497795-Seahorse">
<img src="images/12.jpg" />
<div><span>Seahorse by Trevor Basset</span></div>
</a>
</li>
</ul>
</section>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$('#da-thumbs > li').hoverdir();
});
</script>
</body>
</html>
JS代码(jquery.hoverdir.js):
(function( $,undefined ){
/* * HoverDir object. */
$.HoverDir= function( options,element ){
this.$el= $( element );
this._init( options );
}
;
$.HoverDir.defaults={
hoverDelay:0,reverse:false}
;
$.HoverDir.prototype={
_init:function( options ){
this.options= $.extend( true,{
}
,$.HoverDir.defaults,options );
// load the eventsthis._loadEvents();
}
,_loadEvents:function(){
var _self = this;
this.$el.on( 'mouseenter.hoverdir,mouseleave.hoverdir',function( event ){
var $el= $(this),evType= event.type,$hoverElem= $el.find( 'div' ),direction= _self._getDir( $el,{
x:event.pageX,y:event.pageY}
),hoverClasses= _self._getClasses( direction );
$hoverElem.removeClass();
if( evType === 'mouseenter' ){
$hoverElem.hide().addClass( hoverClasses.from );
clearTimeout( _self.tmhover );
_self.tmhover= setTimeout( function(){
$hoverElem.show( 0,function(){
$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
}
);
}
,_self.options.hoverDelay );
}
else{
$hoverElem.addClass( 'da-animate' );
clearTimeout( _self.tmhover );
$hoverElem.addClass( hoverClasses.from );
}
}
);
}
,// credits:http://stackoverflow.com/a/3647634_getDir:function( $el,coordinates ){
/** the width and height of the current div **/
var w = $el.width(),h = $el.height(),/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ):1 ),y = ( coordinates.y - $el.offset().top - ( h/2 )) * ( h > w ? ( w/h ):1 ),/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
**/
/** first calculate the angle of the point,add 180 deg to get rid of the negative valuesdivide by 90 to get the quadrantadd 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
direction = Math.round( ( ( ( Math.atan2(y,x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
return direction;
}
,_getClasses:function( direction ){
var fromClass,toClass;
switch( direction ){
case 0:// from top( !this.options.reverse ) ? fromClass = 'da-slideFromTop':fromClass = 'da-slideFromBottom';
toClass= 'da-slideTop';
break;
case 1:// from right( !this.options.reverse ) ? fromClass = 'da-slideFromRight':fromClass = 'da-slideFromLeft';
toClass= 'da-slideLeft';
break;
case 2:// from bottom( !this.options.reverse ) ? fromClass = 'da-slideFromBottom':fromClass = 'da-slideFromTop';
toClass= 'da-slideTop';
break;
case 3:// from left( !this.options.reverse ) ? fromClass = 'da-slideFromLeft':fromClass = 'da-slideFromRight';
toClass= 'da-slideLeft';
break;
}
;
return{
from:fromClass,to:toClass}
;
}
}
;
var logError= function( message ){
if ( this.console ){
console.error( message );
}
}
;
$.fn.hoverdir= function( options ){
if ( typeof options === 'string' ){
var args = Array.prototype.slice.call( arguments,1 );
this.each(function(){
var instance = $.data( this,'hoverdir' );
if ( !instance ){
logError( "cannot call methods on hoverdir prior to initialization;
" +"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
logError( "no such method '" + options + "' for hoverdir instance" );
return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
this.each(function(){
var instance = $.data( this,'hoverdir' );
if ( !instance ){
$.data( this,'hoverdir',new $.HoverDir( options,this ) );
}
}
);
}
return this;
}
;
}
)( jQuery );
CSS代码(demo.css):
@import url('normalize.css');/* General Demo Style */
body{font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#fff url(../images/bg.png) repeat top left;font-weight:400;font-size:15px;color:#333;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased;}
a{color:#555;text-decoration:none;}
.container{width:100%;position:relative;min-height:750px;}
.clr{clear:both;padding:0;height:0;margin:0;}
.container > header{margin:10px;padding:20px 10px 10px 10px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header > span{font-family:'Alegreya SC',Georgia,serif;font-size:20px;line-height:20px;display:block;font-weight:400;font-style:italic;color:#719dab;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.container > header h1{font-size:40px;line-height:40px;margin:0;position:relative;font-weight:300;color:#498ea5;padding:5px 0px;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.container > header h1 span{font-weight:700;}
.container > header h2{font-size:14px;font-weight:300;letter-spacing:2px;text-transform:uppercase;margin:0;padding:15px 0 5px 0;color:#6190ca;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.container > header p{font-style:italic;color:#aaa;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255,255,255,0.6);text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.9);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
/* Demo Buttons Style */
.codrops-demos{text-align:center;display:block;line-height:30px;padding:5px 0px;}
.codrops-demos a{display:inline-block;margin:0px 4px;padding:0px 6px;color:#aaa;line-height:20px;font-size:13px;text-shadow:1px 1px 1px #fff;border:1px solid #ddd;background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* IE10+ */
background:linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#ededed',GradientType=0 );/* IE6-9 */
box-shadow:0px 1px 1px rgba(255,255,255,0.5);}
.codrops-demos a:hover{color:#333;box-shadow:0px 1px 1px rgba(255,255,255,0.5);}
.codrops-demos a:active{background:#fff;}
.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{background:#f6f6f6;}
CSS代码(style.css):
.da-thumbs{list-style:none;width:984px;height:600px;position:relative;margin:20px auto;padding:0;}
.da-thumbs li{float:left;margin:5px;background:#fff;padding:8px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.da-thumbs li a,.da-thumbs li a img{display:block;position:relative;}
.da-thumbs li a{overflow:hidden;}
.da-thumbs li a div{position:absolute;background:rgba(75,75,75,0.7);width:100%;height:100%;}
.da-thumbs li a div.da-animate{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
/* Initial state classes:*/
.da-slideFromTop{left:0px;top:-100%;}
.da-slideFromBottom{left:0px;top:100%;}
.da-slideFromLeft{top:0px;left:-100%;}
.da-slideFromRight{top:0px;left:100%;}
/* Final state classes:*/
.da-slideTop{top:0px;}
.da-slideLeft{left:0px;}
.da-thumbs li a div span{display:block;padding:10px 0;margin:40px 20px 20px 20px;text-transform:uppercase;font-weight:normal;color:rgba(255,255,255,0.9);text-shadow:1px 1px 1px rgba(0,0,0,0.2);border-bottom:1px solid rgba(255,255,255,0.5);box-shadow:0 1px 0 rgba(0,0,0,0.1),0 -10px 0 rgba(255,255,255,0.3);}
分享到QQ
分享到微博
微信扫一扫
