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
JQuer.HoverDir的基本使用方法的更多相关文章
- 改BUG方法
---恢复内容开始--- 今天改了半天参数,后来发现原来是表设置错了,于是决定总结出遇到BUG时的方法,等下次再遇到BUG时,过一遍每个方法就会减少解决BUG的时间,话不多说,写 ①检查表.数据库是否 ...
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- 再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- JQuery onload、ready概念介绍及使用方法
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成,onload,ready概念容易混淆,下面为大家详细介绍下 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包 ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jQuery插入节点的方法
注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容: HTML代码:<p>我想说:</p>jQuery代码:$(" ...
- Jquery开发插件的方法
Jquery未开发插件提供了两个方法: (1)Jquery.extend(object) -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...
随机推荐
- 深入理解Java接口和抽象类
对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的时候会以为它们可以随意互换使用, ...
- python求100以内素数
python求100以内素数之和 from math import sqrt # 使用isPrime函数 def isPrime(n): if n <= 1: return False for ...
- POJ1038 Bugs Integrated, Inc.
题目来源:http://poj.org/problem?id=1038 题目大意: 有一家芯片公司要在一块N*M的板子上嵌入芯片,其中1<=N<=150, 1<=M<=10,但 ...
- css网页布局 --- 左边固定,右边自适应
div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...
- commons-pool2
转载请注明源出处:http://www.cnblogs.com/lighten/p/7375611.html 1.前言 本章介绍一下常用基础Jar包commons-pools2,最近使用到了thrif ...
- 维特比算法(Viterbi)-实例讲解(暴力破解+代码实现)
1.简介 维特比算法是一个通用的求序列最短路径的动态规划算法,也可以用于很多其他问题,比如:文本挖掘.分词原理.既然是动态规划算法,那么就需要找到合适的局部状态,以及局部状态的递推公式.在HMM中,维 ...
- [转]MVC HtmlHelper用法大全
原文链接:http://www.cnblogs.com/jyan/archive/2012/07/23/2604474.html HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了 ...
- Disconf 学习系列之Disconf 的主要目标
不多说,直接上干货! 部署极其简单:同一个上线包,无须改动配置,即可在 多个环境中(RD/QA/PRODUCTION) 上线: 部署动态化:更改配置,无需重新打包或重启,即可 实时生效: 统一管理:提 ...
- sql 获取列名
--查询所有列 select name from syscolumns where id=OBJECT_ID('PTS_ProjectTask') --列转为行 GetColumnJoin 'Proj ...
- tomcat启动(Ⅶ)请求处理--Processor.process(SocketWrapper<S> socketWrapper)
tomcat启动(六)Catalina分析-StandardServer.start() 上一篇分析到:Http11NioProcessor.process(SocketWrapper<S> ...