效果体验:http://hovertree.com/texiao/jquery/7.htm

HTML文件代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body> <style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
} a, img {
border: 0;
text-decoration: none;
} body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
background: #333;
color:white;
} .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .clearfix {
display: inline-table;
}
/* Hides from IE-mac */
*html .clearfix {
height: 1%;
} .clearfix {
display: block;
}
/* End hide from IE-mac */
* + html .clearfix {
min-height: 1%;
}
/* hovertreeaction */
.hovertreeaction {
width: 981px;
margin: 40px auto 0 auto;
overflow: hidden;
} .hovertreeaction ul {
width: 996px;
} .hovertreeaction ul li {
float: left;
margin-right: 14px;
margin-bottom: 13px;
display: inline;
width: 318px;
height: 343px;
overflow: hidden;
position: relative;
} .hovertreeaction ul li .photo {
width: 318px;
height: 343px;
overflow: hidden;
} .hovertreeaction .rsp {
width: 318px;
height: 343px;
overflow: hidden;
position: absolute;
background: #000;
top: 0px;
left: 0px;
} .hovertreeaction .text {
position: absolute;
width: 318px;
height: 343px;
left: -318px;
top: 0px;
overflow: hidden;
} .hovertreeaction .text h3 {
width: 318px;
margin-top: 130px;
height: 55px;
line-height: 55px;
text-align: center;
color: #FFFFFF;
background: #000000;
font-family: "microsoft yahei";
font-size: 26px;
} #foot_bm a, #foot_bm, p, p a {
color: #666;
}
</style> <div class="hovertreeaction">
<h1>鼠标滑过图片变暗文字链接滑出jQuery特效</h1><br />
<ul class="clearfix">
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/1.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/"><h3>HoverTree</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/2.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/menu/jquery/"><h3>何问起</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/3.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://keleyi.com/"><h3>柯乐义</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/4.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/menu/csharp/"><h3>C Sharp</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/5.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://tool.keleyi.com/"><h3>Keleyi</h3></a> </div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/6.gif" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/texiao/"><h3>网页特效</h3></a></div>
</li>
</ul>
<div class="clear"></div>
<a href="http://hovertree.com/hvtart/bjae/o8b7w9u8.htm" style="color:white;">原文</a>
</div> <script>
$(document).ready(function(){ $(".hovertreeaction ul li .rsp").hide(); $(".hovertreeaction ul li").hover(function(){
$(this).find(".rsp").stop().fadeTo(500,0.5)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
},function(){
$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
$(this).find(".text").animate({left:'-318'}, {duration: 0})
}); });
</script> </body>
</html>

Web前端资源汇总 : http://www.cnblogs.com/jihua/p/webfront.html

鼠标滑过图片变暗文字链接滑出jQuery特效的更多相关文章

  1. css文字链接滑过向上移动1像素

    方法一:行高 a{line-height:22px;} a:hover{line-height:21px;}   方法二:定位 a{position:absolute;top:0;} a:hover{ ...

  2. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  3. 鼠标滑过图片添加边框图片无位移[xyytit]

    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. 鼠标滑过弹出jquery在线客服

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JQuery 实现鼠标经过图片高亮显示,其余图片变暗

    效果图: 当鼠标经过图片时,其余图片变暗,来高亮显示当前图片,主要用的是对比度.当然你也可以先把其他图片默认变暗,鼠标经过时高亮显示,不过,无鼠标经过时整体图片都会是偏暗色调. 效果可以通过 三步实现 ...

  6. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  7. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  8. markdown 使用示例,包含常用的标题、图片、文字样式、代码块、链接等

    ps:博客园markdown不能自动生成列表,更好的阅读体验可访问我的个人博客http://www.isspark.com/archives/Markdown%E7%A4%BA%E4%BE%8B # ...

  9. 14种网页图片和文字特效的jQuery插件代码

    1.网页图片3d旋转jQuery代码 演示和下载地址 2.存css3实现的tabl选项卡代码 演示和下载地址 3.jQuery标签旋转代码 演示和下载地址 4.鼠标悬浮的图片选项卡代码 演示和下载地址 ...

随机推荐

  1. fir.im Weekly - 除了新 MacBook Pro,近期值得关注的移动开发好资源

    最近,最引人瞩目的莫过于 Apple 产品发布会,MacBook Pro 的更新可能是四年来变化最大的一版.除了更轻.更薄.性能更好.电力更足之外,最大的变化是加入了Touch Bar,被定义为 Ma ...

  2. Visulalization Voronoi in OpenSceneGraph

    Visulalization Voronoi in OpenSceneGraph eryar@163.com Abstract. In mathematics a Voronoi diagram is ...

  3. [转]自己写PHP扩展之创建一个类

    原文:http://www.imsiren.com/archives/572 比如我们要创建一个类..PHP代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  4. java静态代理与动态代理

    原文链接:http://www.orlion.ga/207/ 一.代理模式 代理模式是经常用到的设计模式,代理模式是给指定对象提供代理对象.由代理对象来控制具体对象的引用. 代理模式涉及到的角色: 抽 ...

  5. 不使用session,借助redis实现验证码

    1.首先看一下基本的流程 2.看一下代码 注:其中用到的一些工具类,可以到我的github上去下载  https://github.com/hjzgg/usually_util/tree/master ...

  6. AngularJS之初级Route【一】(六)

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...

  7. Util应用程序框架公共操作类(六):验证扩展

    前面介绍了仓储的基本操作,下面准备开始扩展查询,在扩展查询之前,首先要增加两个公共操作类,一个是经常要用到的验证方法,另一个是Lambda表达式的操作类. 很多时候,我们会判断一个对象是否为null, ...

  8. 跌倒了,再爬起来:ASP.NET 5 Identity

    "跌倒了"指的是这一篇博文:爱与恨的抉择:ASP.NET 5+EntityFramework 7 如果想了解 ASP.NET Identity 的"历史"及&q ...

  9. 【记录】VS2012新建MVC3/MVC4项目时,报:此模板尝试加载组件程序集“NuGet.VisualStudio.Interop...”

    最近电脑装了 VisualStudio "14" CTP,由于把其他版本的 VS 卸掉,由高到低版本安装,当时安装完 VisualStudio "14" CTP ...

  10. Cesium原理篇:1最长的一帧之渲染调度

    原计划开始着手地形系列,但发现如果想要从逻辑上彻底了解地形相关的细节,那还是需要了解Cesium的数据调度过程,这样才能更好的理解,因此,打算先整体介绍一下Cesium的渲染过程,然后在过渡到其中的两 ...