JQuer.HoverDir的基本使用方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuer.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  

以上是关于JQuer.HoverDir的基本使用方法的主要内容,如果未能解决你的问题,请参考以下文章

python列表的基本使用方法及其基本函数

Autofac的基本使用---目录

js 面向对象的基本概念和基本使用方法

python基本数据类型;列表及其方法二:基本方法与使用

python基本数据类型;列表及其方法二:基本方法与使用

1.1 js 面向对象的基本概念和基本使用方法