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
