基于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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
没有document.getElementByName方法
Aug 19 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
react-navigation之动态修改title的内容
Sep 26 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 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
一个显示天气预报的程序
2006/10/09 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP多进程编程实例详解
2017/07/19 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
python检索特定内容的文本文件实例
2018/06/05 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
python构建指数平滑预测模型示例
2019/11/21 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
python os.listdir()乱码解决方案
2021/01/31 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
给校长的建议书500字
2014/05/15 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
依法行政工作汇报材料
2014/10/28 职场文书