JQuer.HoverDir的基本使用方法:解决modernizr报错问题
金阳华
遇到一个需要根据鼠标进入和移出方向，来判断遮罩层动画的，做完总结一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.da-thumbs {
width: 1000px;
list-style: none;
position: relative;
margin: 0 auto;
padding: 0;
}
.da-thumbs li {
float: left;
margin: 5px;
width: 30%;
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;
width: 100%;
height: 100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}
.da-thumbs li a {
overflow: hidden;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
}
.da-thumbs li a div {
position: absolute;
background: rgba(75, 75, 75, 0.7);
width: 100%;
height: 100%;
}
/* animate */
.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;
}
</style>
</head>
<body>
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="#" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="images/1.jpg" alt="" width="113" height="113">
<div><span>简介</span></div>
</a>
</li>
<li>
<a href="#">
<img src="images/g-11.jpg" alt="" width="113" height="113">
<div><span>简介</span></div>
</a>
</li>
</ul>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.97074.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each(function() {
$(this).hoverdir();
});
});
</script>
</body>
</html>
** modernizr.custom.97074.js必须加上，否则会报错“Modernizr is not defined”
** 该插件支持动画效果，延迟动画效果，和反向
$('#da-thumbs > li').hoverdir( {
hoverDelay : 50,
reverse : true
});
** hoverDelay是延迟加载时间，越大时间越长。reverse是是否反向，true表示反向，默认false
jQuery.Hoverdir
该脚本监视鼠标光标悬停该项目的方向。在这些情况下的类的in-top，in-right，in-bottom或in-left加入到悬停的项目。
在鼠标光标的情况下离开该项目时，类离去方向被施加在物品上（out-top，out-right，out-bottom或out-left）。
必须文件：（加载顺序不可以乱）
- jquery-1.8.3.min.js
- modernizr.custom.97074.js
- jquery.hoverdir.js
不想去搜索下载，本站已贴心上传modernizr和hoverdir文件，直接点击即可跳转到下载页。
类似资料：