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


Posted in Javascript onJuly 25, 2016

今天我们来学习如何通过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" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</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 div {
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( '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 );
}
} );

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

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

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

原地址和插件下载

以上所述是小编给大家介绍的基于CSS3和jQuery实现跟随鼠标方位的Hover特效,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
javascript insertAfter()定义与用法示例
Jul 25 #Javascript
jquery之别踩白块游戏的简单实现
Jul 25 #Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 #Javascript
JavaScript表单焦点自动切换代码
Jul 24 #Javascript
javascript中sort排序实例详解
Jul 24 #Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 #Javascript
关于input全选反选恶心的异常情况
Jul 24 #Javascript
You might like
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
用jscript启动sqlserver
2007/06/21 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
理解javascript闭包
2015/12/15 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
Javascript继承机制详解
2017/05/30 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
vue组件生命周期详解
2017/11/07 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
python实现图片九宫格分割
2021/03/07 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作建议书范文
2019/07/08 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android