在这里插入图片描述废话不多说，直接上代码，
<!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