基于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 getElementsByClassName函数
Apr 01 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
Element Notification通知的实现示例
Jul 27 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
Python多线程学习资料
2012/12/19 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python构建网页爬虫原理分析
2017/12/19 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
市场部规章制度
2014/01/24 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
爱国主义影片观后感
2015/06/18 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android