基于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 核心参考教程 内置对象
Oct 13 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js document.write()使用介绍
Feb 21 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
window.onload使用指南
Sep 13 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
angular组件间传值测试的方法详解
May 07 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 Static关键字实用方法
2010/06/04 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php命令行写shell实例详解
2018/07/19 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
js数组的操作详解
2013/03/27 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
自我评价中英文语句
2013/11/30 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
情人节活动策划方案
2014/02/27 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python