JQuer.HoverDir的基本使用方法

首先引入JQ和HoverDir库 ,JQuer.HoverDir的下载地址: http://www.htmleaf.com/jQuery/Image-Effects/20141106396.html

HTML部分:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #289c97 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #289c97 }
span.Apple-tab-span { white-space: pre }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #289c97 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #289c97 }
span.Apple-tab-span { white-space: pre }

<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部分;

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d74200 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #4a8a01 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad42ef }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; min-height: 23.0px }
span.s1 { color: #000000 }
span.s2 { color: #060606 }
span.s3 { color: #929151 }
span.s4 { color: #48565d }
span.s5 { color: #d16400 }
span.s6 { color: #ad42ef }
span.s7 { color: #698906 }
span.s8 { color: #2b7ec3 }
span.s9 { color: #4a8a01 }
span.Apple-tab-span { white-space: pre }

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #289c97 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #4663cc }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b7ec3 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #d74200 }
span.s4 { color: #48565d }
span.s5 { color: #000000 }
span.s6 { color: #e48b00 }
span.s7 { color: #060606 }
span.Apple-tab-span { white-space: pre }

<script type="text/javascript">

$(function() {

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

});

</script>

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

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

hoverDelay : 50,

reverse : true

});

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

时间： 2024-10-11 18:39:43

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

最近一段时间的一些学习，以及遇见的一些问题总结

1.首先我用了layer的一个把整个页面当成遮罩层的一个技术,参考链接:ttp://layer.layui.com/ 2.页面间的操作出现了一些问题,我想把数据都存储到数组里边,一起操作执行.所以遇见了一些问题.总结如下: Js问题:1.prototype,为一些封装好的类或者属性或者函数注册方法,使用实例如下: Array.prototype.remove = function (obj) { for (var i = 0; i < this.length; i++) { var temp =

Jquer基础之动画操作

Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show()方法会将隐藏的元素显示出来,使用hide()方法会将元素的属性设置为display:none.使用hide()方法会记住原来的display属性值,并把现在的display属性设置为none;show()方法会元素的属性设置为hide()前的属性值. 示例: $("btnShowHide"

jquery编写插件的方法

版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个方

再谈：jquery编写插件的方法

版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个方

Jquery开发插件的方法

Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b){ return a+b; } }); 调用方法:$.add(3,4) - $=Jquery 为jquery类添加了名为add的一个静态方法,之后便可以在引入jquery的地方,使用这个方法了,$.add(3,4); (2)Jquery.fn.extend(object) $.fn相当于Jquery

JQuery onload、ready概念介绍及使用方法（转）

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 $(function(){ // do something }); 其实这个就是jq ready()的简写,他等价于:

JQuery常用选择器，方法，正则表达式

JQuer常用选择器,方法,正则表达式 JQuer 选择器 1) 标签选择器:$(" h3 ")取全部的h2元素 层次选择器:$("#div a ")取div下全部<a>元素 类选择器:  $(".title ")取全部class下的title元素 子选择器:     $(" #menu>span ")选取#menu下的子元素 Id 选择器:     $(" # title")取id 为t

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

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成,onload,ready概念容易混淆,下面为大家详细介绍下 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常

Unity 崩溃问题解决方法——之一

友情提示:工作随记,不喜勿喷 注意:文艺青年可以略过,暴力青年欢迎采纳 Library文件夹 Unity每次编译都会生成这个东西,不用担心丢失的问题.所以,干掉他! 选中 + Delete   或者  选中 + Shift  + Delete 网上看了很多方法,就觉得这个简单,粗暴,是我喜欢的类型. 优点:上面说了 缺点:如果工程过大,重新编译时间会比较长.(但是对于查Log日志来说,相对快点)