首先引入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

JQuer.HoverDir的基本使用方法的更多相关文章

  1. 改BUG方法

    ---恢复内容开始--- 今天改了半天参数,后来发现原来是表设置错了,于是决定总结出遇到BUG时的方法,等下次再遇到BUG时,过一遍每个方法就会减少解决BUG的时间,话不多说,写 ①检查表.数据库是否 ...

  2. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  3. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  4. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  5. 再谈:jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  6. JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成,onload,ready概念容易混淆,下面为大家详细介绍下   页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包 ...

  7. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

  8. jQuery插入节点的方法

    注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容:  HTML代码:<p>我想说:</p>jQuery代码:$(" ...

  9. Jquery开发插件的方法

    Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...

随机推荐

  1. 深入理解Java接口和抽象类

    对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的时候会以为它们可以随意互换使用, ...

  2. python求100以内素数

    python求100以内素数之和 from math import sqrt # 使用isPrime函数 def isPrime(n): if n <= 1: return False for ...

  3. POJ1038 Bugs Integrated, Inc.

    题目来源:http://poj.org/problem?id=1038 题目大意: 有一家芯片公司要在一块N*M的板子上嵌入芯片,其中1<=N<=150, 1<=M<=10,但 ...

  4. css网页布局 --- 左边固定,右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  5. commons-pool2

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7375611.html 1.前言 本章介绍一下常用基础Jar包commons-pools2,最近使用到了thrif ...

  6. 维特比算法(Viterbi)-实例讲解(暴力破解+代码实现)

    1.简介 维特比算法是一个通用的求序列最短路径的动态规划算法,也可以用于很多其他问题,比如:文本挖掘.分词原理.既然是动态规划算法,那么就需要找到合适的局部状态,以及局部状态的递推公式.在HMM中,维 ...

  7. [转]MVC HtmlHelper用法大全

    原文链接:http://www.cnblogs.com/jyan/archive/2012/07/23/2604474.html HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了 ...

  8. Disconf 学习系列之Disconf 的主要目标

    不多说,直接上干货! 部署极其简单:同一个上线包,无须改动配置,即可在 多个环境中(RD/QA/PRODUCTION) 上线: 部署动态化:更改配置,无需重新打包或重启,即可 实时生效: 统一管理:提 ...

  9. sql 获取列名

    --查询所有列 select name from syscolumns where id=OBJECT_ID('PTS_ProjectTask') --列转为行 GetColumnJoin 'Proj ...

  10. tomcat启动(Ⅶ)请求处理--Processor.process(SocketWrapper<S> socketWrapper)

    tomcat启动(六)Catalina分析-StandardServer.start() 上一篇分析到:Http11NioProcessor.process(SocketWrapper<S> ...