基于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的caller,callee,call,apply
Apr 28 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
jQuery手风琴的简单制作
May 12 jQuery
详解 vue.js用法和特性
Oct 15 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 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多用户读写文件冲突的解决办法
2013/11/06 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP实现八皇后算法
2019/05/06 PHP
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python open()文件处理使用介绍
2014/11/30 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
详解python中的Turtle函数库
2018/11/19 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
安全承诺书范文
2014/03/26 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android