这篇文章主要介绍了基于css3和jquery实现跟随鼠标方位的hover特效的相关资料,需要的朋友可以参考下
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候，遮罩层会从上次鼠标滑出的方向滑入，当鼠标滑出的时候，遮罩层会跟随鼠标，从鼠标滑出的方向滑出。这是一个十分有趣的效果。
我们使用无序列表来组织缩略图和描述遮罩层：
登录后复制
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 p {position: absolute;background: rgba(75,75,75,0.7);width: 100%;height: 100%;}登录后复制
接下来我们将这样做：根据鼠标进入的位置，我们将“from”样式应用给遮罩层，它设置了遮罩层的初始位置。然后我们将使用过渡并将添加最终状态的样式。这样遮罩层就滑入了。当我们离开元素时，我们再次应用“from”样式给遮罩层（尽管现在实际上是滑出）并去除之前的最终状态样式。
嗯，以下就是这个小插件的核心：
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {var $el = $( this ),$hoverElem = $el.find( 'p' ),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 );}} );登录后复制
我们主要是给列表项绑定‘mouseenter’和‘mouseleave’事件，通过_getDir函数我们获得鼠标滑进或滑出的方向（想象检测区域是个被分成四个三角形的矩形）。
你将会看到，在第二个demo中，我们添加了延迟，这样当鼠标从一个角落移到另一个角落的时候不会发生太多的动画。
我希望你可以喜欢这个小特效并觉得很有用！
如果浏览器不支持CSS过渡将会使用jQuery动画。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
jQuery 如何实现一个滑动按钮的开关
JavaScript如何判断浏览器对CSS3属性是否支持
以上就是CSS3和jQuery实现跟随鼠标方位的Hover特效的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2895789.html
