HoverDir响应鼠标移动方向的悬停效果插件
浏览:4252次 出处信息
之前的一篇文章JS判断从哪个方向判断进入一个容器中提到了一个效果,通过计算鼠标位置以及一些数学方法,来判断鼠标是从哪个方向进入以及离开该容器的。今天我这里搜索到一个不错的实战效果,分享给大家。是基于jquery的一个插件。该效果出品人是老外,原文地址
该效果用到的几点技术,一个是css3的动画效果,这里不是采用的js的动画效果,所以兼容性存在不足。另外就是之前提到的针对进入方向的判断。
效果演示地址:http://www.niumowang.org/demo/hoverDir/
代码构成,HTML标签部分
<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>代码构成,CSS部分
.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%; }需要注意的是隐藏的div是决定定位的,所以他的父元素就要采用relative相对定位。
CSS动画关键部分,采用css3的动画效果,以及添加方向的class
.da-thumbs li a div.da-animate { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* 动画开始阶段的class */ .da-slideFromTop { left: 0px; top: -100%; } .da-slideFromBottom { left: 0px; top: 100%; } .da-slideFromLeft { top: 0px; left: -100%; } .da-slideFromRight { top: 0px; left: 100%; } /* 动画结果阶段的class: */ .da-slideTop { top: 0px; } .da-slideLeft { left: 0px; }动画的js脚本部分
脚本部分,就是引入jquery文件,引入该插件。然后调用该插件即可。
$(function() {
$('#da-thumbs > li').hoverdir();
});
该插件支持动画效果,延迟动画效果,和反向
$('#da-thumbs > li').hoverdir( {
hoverDelay : 50,
reverse : true
});
hoverDelay是延迟加载时间,越大时间越长。reverse是是否反向,true表示反向,默认false
效果演示地址:http://www.niumowang.org/demo/hoverDir/
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:css3实现滑动菜单导航
后一篇:颜色的代码表达式 >>
文章信息
- 作者:痞子 来源: 牛魔王的世界观
- 标签: HoverDir 悬停
- 发布时间:2012-10-22 13:16:24
近3天十大热文
- [54] android 开发入门
- [54] IOS安全–浅谈关于IOS加固的几种方法
- [52] Oracle MTS模式下 进程地址与会话信
- [52] 图书馆的世界纪录
- [51] Go Reflect 性能
- [50] 如何拿下简短的域名
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [48] 【社会化设计】自我(self)部分――欢迎区
- [38] 程序员技术练级攻略
- [31] 视觉调整-设计师 vs. 逻辑