基于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 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
域名查询代码公布
2006/10/09 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
理解AngularJs指令
2015/12/10 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
Angular实现的进度条功能示例
2018/02/18 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
python logging 日志的级别调整方式
2020/02/21 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
maven依赖的version声明控制方式
2022/01/18 Java/Android
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server