JQuer.HoverDir的基本使用方法

首先引入JQ和HoverDir库

HTML部分:

<ul id="da-thumbs" class="da-thumbs">

<li>

<a href="#">

<img src="img/001.png" alt="">

<div class="hot-info">

<h2>infenStudio</h2>

<em></em>

<p title="infenStudio">

HTML+CSS

</p>

</div>

</a>

</li>

<li>

<a href="#">

<img src="img/002.png" alt="">

<div class="hot-info">

<h2>SHINING</h2>

<em></em>

<p title="SHINGING">

HTML+CSS

</p>

</div>

</a>

</li>

<ul>

CSS部分;

.da-thumbs {

list-style: none;

height: 113px;

position: relative;

padding: 0;

margin-bottom: 20px;

}

.da-thumbs li {

float: left;

margin-right: 10px;

background: #ffffff;

border: 2px solid #fafafa;

}

.da-thumbs li a {

display: block;

position: relative;

height: 113px;

}

.da-thumbs li a {

overflow: hidden;

color: #ffffff;

}

.da-thumbs li a div {

position: absolute;

background: #019875;

opacity: 0.9;

width: 100%;

height: 100%;

}

.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;

}

.da-slideFromTop {

left: 0px;

top: -100%;

}

.da-slideFromBottom {

left: 0px;

top: 100%;

}

.da-slideFromLeft {

top: 0px;

left: -100%;

}

.da-slideFromRight {

top: 0px;

left: 100%;

}

.da-slideTop {

top: 0px;

}

.da-slideLeft {

left: 0px;

}

.da-thumbs li a em {

display: block;

width: 100px;

height: 4px;

background: #ffffff;

margin: 0 6px;

opacity: 0.5;

}

.da-thumbs li a h2 {

font-size: 20px;

height: 20px;

line-height: 20px;

font-weight: normal;

overflow: hidden;

margin: 8px;

}

.da-thumbs li a p {

font-size: 12px;

line-height: 18px;

margin: 6px 8px;

}

.da-thumbs li {

width: 100px;

height: 100px;

}

.da-thumbs li img {

width: 100%;

height: 100%;

}

js部分;

<script type="text/javascript">

$(function() {

$('#da-thumbs > li').hoverdir();

});

</script>

该插件支持动画效果，延迟动画效果，和反向

$('#da-thumbs > li').hoverdir( {

hoverDelay : 50,

reverse : true

});

hoverDelay是延迟加载时间，越大时间越长。reverse是是否反向，true表示反向，默认false