【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过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特效的更多相关文章
- 9种CSS3 blend模式制作的鼠标滑过图片标题特效
这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...
- jQuery背景跟随鼠标移动的网页导航
首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 ...
- 用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单 html代码如下: <span class="title">Mask Your Input Forms and Make ...
- 一款基于jquery实现的鼠标单击出现水波特效
今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览 源码下载 实现的代 ...
- sketch 跟随鼠标指针移动的特效
演示地址:http://www.ke01.com/yanshi/sucai/20140830/2/ 下载地址:https://yunpan.cn/cqgWeIYPer8eC 访问密码 672b
- 15个CSS3和jQuery的超棒页面过渡效果教程
来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
随机推荐
- Jquery中的offset()和position()
今天遇到这个偏移量的问题,特做此记录.以便日后查看. 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见 ...
- hyper-v 中 安装 Centos 7.0 设置网络 教程
安装环境是: 系统:win server 2012 r2 DataCenter hyper-v版本:6.3.9600.16384 centos版本:7.0 从网上下载的 centos 7.0 如果找 ...
- 【initrd】向虚拟文件系统initrd.img中添加驱动
虚拟文件系统:initrd-2.6.18-194.el5.img 希望添加网卡或SCSI等驱动 步骤: 解压initrd-2.6.18-194.el5.img: 添加*.ko文件,并修改init可执行 ...
- Bind9用view配主从
We use two Bind server to realize view, master, slave----------------------------------------------- ...
- 关于uboot中tftp上传内存数据到tftp服务器
uboot下的tftp下载功能是非常重要和常见的功能.但是偶尔有些特殊需求的人需要使用uboot的tftp具有上传功能.默认的uboot没有tftp上传功能,如果需要修改uboot代码.使用时键入第4 ...
- 黄聪:使用WORDPRESS自带AJAX方法
例如给网站每页logo后面的一句名言,点击“换一条”就会ajax动态加载一条,使用了wordpress的自带ajax方法.下面介绍如何使用wordpress自带ajax方法: 1.在header.ph ...
- Redis作者谈Redis应用场景(转)
毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...
- DBA_基本Bash语法汇总(汇总)
2014-06-26 Created By BaoXinjian
- HDU 3652 B-number(数位dp)
题意:B数的定义是有字符串“13”且能被整数13整除的数,求[1,n]内的B数个数. 题解:这是数位DP,我也就是刚入门,前两天看到了非递归写法,好麻烦.所以我建议写dfs的方法,容易理解,代码还简短 ...
- CentOS配置网卡,重启网络显示:Device does not seem to be present(转载)
From:http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 一.故障现象: [root@c1node01 ~]# servic ...