Rumah >hujung hadapan web >tutorial css >CSS3和jQuery实现跟随鼠标方位的Hover特效

CSS3和jQuery实现跟随鼠标方位的Hover特效

不言
不言asal
2018-06-25 16:26:222162semak imbas

这篇文章主要介绍了基于CSS3和jQuery实现跟随鼠标方位的Hover特效的相关资料,需要的朋友可以参考下

今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出。这是一个十分有趣的效果。
我们使用无序列表来组织缩略图和描述遮罩层:

<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<p><span>Natalie & Justin Cleaning by Justin Younger</span></p>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>

这些列表项将会向左浮动,并且相对定位,因为我们绝对定位描述遮罩层:

.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 p {
position: absolute;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}

接下来我们将这样做:根据鼠标进入的位置,我们将“from”样式应用给遮罩层,它设置了遮罩层的初始位置。然后我们将使用过渡并将添加最终状态的样式。这样遮罩层就滑入了。当我们离开元素时,我们再次应用“from”样式给遮罩层(尽管现在实际上是滑出)并去除之前的最终状态样式。

嗯,以下就是这个小插件的核心:

this.$el.on( &#39;mouseenter.hoverdir, mouseleave.hoverdir&#39;, function( event ) {
var $el = $( this ),
$hoverElem = $el.find( &#39;p&#39; ),
direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
styleCSS = self._getStyle( direction );
if( event.type === &#39;mouseenter&#39; ) {
$hoverElem.hide().css( styleCSS.from );
clearTimeout( self.tmhover );
self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
var $el = $( this );
if( self.support ) {
$el.css( &#39;transition&#39;, self.transitionProp );
}
self._applyAnimation( $el, styleCSS.to, self.options.speed );
} );
}, self.options.hoverDelay );
}
else {
if( self.support ) {
$hoverElem.css( &#39;transition&#39;, self.transitionProp );
}
clearTimeout( self.tmhover );
self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
}
} );

我们主要是给列表项绑定‘mouseenter'和‘mouseleave'事件,通过_getDir函数我们获得鼠标滑进或滑出的方向(想象检测区域是个被分成四个三角形的矩形)。

你将会看到,在第二个demo中,我们添加了延迟,这样当鼠标从一个角落移到另一个角落的时候不会发生太多的动画。
我希望你可以喜欢这个小特效并觉得很有用!

如果浏览器不支持CSS过渡将会使用jQuery动画。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery 如何实现一个滑动按钮的开关

JavaScript如何判断浏览器对CSS3属性是否支持

Atas ialah kandungan terperinci CSS3和jQuery实现跟随鼠标方位的Hover特效. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn