html5遮罩效果鼠标悬停,jquery和css3方向感知鼠标滑过图片遮罩效果

这个教程是教你如何使用jQuery和css3制作一个可以感知鼠标方向的hover图片遮罩层效果。

html结构使用一个无序列表来包住所有的图片和图片说明。

HTML

• 

  Natalie & Justin Cleaning by Justin Younger

无序列表要做成相对定位并且左浮动，图片描述(遮罩层)使用绝对定位。

.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%;

}

核心javascript部分代码：为列表中的每个元素绑定“mouseenter”和“mouseleave”事件，并通过_getDir函数获取鼠标移入移出的方向。

this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {

var $el = $( this ),

$hoverElem = $el.find( 'div' ),

direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),

styleCSS = self._getStyle( direction );

if( event.type === 'mouseenter' ) {

$hoverElem.hide().css( styleCSS.from );

clearTimeout( self.tmhover );

self.tmhover = setTimeout( function() {

$hoverElem.show( 0, function() {

var $el = $( this );

if( self.support ) {

$el.css( 'transition', self.transitionProp );

}

self._applyAnimation( $el, styleCSS.to, self.options.speed );

} );

}, self.options.hoverDelay );

}

else {

if( self.support ) {

$hoverElem.css( 'transition', self.transitionProp );

}

clearTimeout( self.tmhover );

self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );

}

} );