今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑出。这是一个十分有趣的效果。
我们使用无序列表来组织缩略图和描述遮罩层:

<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="data: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特效的更多相关文章

  1. 9种CSS3 blend模式制作的鼠标滑过图片标题特效

    这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...

  2. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  3. 用css3和jQuery制作精美的表单

    用css3和jQuery制作一个简单的精美表单 html代码如下: <span class="title">Mask Your Input Forms and Make ...

  4. 一款基于jquery实现的鼠标单击出现水波特效

    今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览   源码下载 实现的代 ...

  5. sketch 跟随鼠标指针移动的特效

    演示地址:http://www.ke01.com/yanshi/sucai/20140830/2/ 下载地址:https://yunpan.cn/cqgWeIYPer8eC  访问密码 672b

  6. 15个CSS3和jQuery的超棒页面过渡效果教程

    来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...

  7. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  8. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  9. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

随机推荐

  1. Jquery中的offset()和position()

    今天遇到这个偏移量的问题,特做此记录.以便日后查看. 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见 ...

  2. hyper-v 中 安装 Centos 7.0 设置网络 教程

    安装环境是: 系统:win server 2012 r2 DataCenter hyper-v版本:6.3.9600.16384 centos版本:7.0 从网上下载的 centos 7.0  如果找 ...

  3. 【initrd】向虚拟文件系统initrd.img中添加驱动

    虚拟文件系统:initrd-2.6.18-194.el5.img 希望添加网卡或SCSI等驱动 步骤: 解压initrd-2.6.18-194.el5.img: 添加*.ko文件,并修改init可执行 ...

  4. Bind9用view配主从

    We use two Bind server to realize view, master, slave----------------------------------------------- ...

  5. 关于uboot中tftp上传内存数据到tftp服务器

    uboot下的tftp下载功能是非常重要和常见的功能.但是偶尔有些特殊需求的人需要使用uboot的tftp具有上传功能.默认的uboot没有tftp上传功能,如果需要修改uboot代码.使用时键入第4 ...

  6. 黄聪:使用WORDPRESS自带AJAX方法

    例如给网站每页logo后面的一句名言,点击“换一条”就会ajax动态加载一条,使用了wordpress的自带ajax方法.下面介绍如何使用wordpress自带ajax方法: 1.在header.ph ...

  7. Redis作者谈Redis应用场景(转)

    毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...

  8. DBA_基本Bash语法汇总(汇总)

     2014-06-26 Created By BaoXinjian

  9. HDU 3652 B-number(数位dp)

    题意:B数的定义是有字符串“13”且能被整数13整除的数,求[1,n]内的B数个数. 题解:这是数位DP,我也就是刚入门,前两天看到了非递归写法,好麻烦.所以我建议写dfs的方法,容易理解,代码还简短 ...

  10. CentOS配置网卡,重启网络显示:Device does not seem to be present(转载)

    From:http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 一.故障现象: [root@c1node01 ~]# servic ...