效果体验：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. 使用 fixed role 授予权限

    今天下午,Leader 发mail给我,要求授予某个User对数据库只读的权限. Step1,在SQL Server中为该用户创建一个Login和User,在创建User时,建立Login 和 Use ...

  2. 【Win10 应用开发】从前台应用触发后台任务

    有关后台任务的使用,估计大伙伴们不会陌生,而且老周曾经在某文中也简单讲述过.说到后台任务,老周想到了一个问题:有人问,后台任务一定要独立写到一个Runtime组件中吗,能不能写到主项目的代码中? 老周 ...

  3. 轻量级前端MVVM框架avalon - 执行流程1

    基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...

  4. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  5. .NET平台机器学习组件-Infer.NET(三) Learner API—数据映射与序列化

             所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 微软Infer.NET机器学习组件:http://www.cnblo ...

  6. Web APi之消息处理管道（五）

    前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成.我们知道请求信息存在 RequestMessa ...

  7. javascript之一切皆为对象2

    其实呢,“函数function”和“对象object”之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象. 这个函数是一种对象,上节中“Javascript之一切皆为对象1”也清楚的阐述 ...

  8. 【原】IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突)

    网上流传了太多关于合并lib库的方法,自己也尝试过,但大多失败.有感于这种急于解决问题,经过百般尝试后依旧无果的无奈心情,小翁在这里用一个实例来完整阐述如何在mac中合并lib静态库. 这里以移动广告 ...

  9. objective-c中的@selector()和 c /c++的函数指针

    先看tomcat里用到的代码: //然后开始动画 //把图片放到animationImages,接受数组参数 self.tom.animationImages = arrayImage; //设置时间 ...

  10. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...