在线体验效果：http://hovertree.com/texiao/jquery/1.htm

以下是完整源代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery实现鼠标经过图片变亮效果 - 何问起</title><base target="_blank" />

<style type="text/css">

a {color:white;}

body{background:#000;}

body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}

.hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}

.hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}

</style>

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>

<script type="text/javascript">

$(function(){

$('.hovertreebox li').mouseover(function (e) {

$(this).siblings().stop().fadeTo(500,0.4);

});

$('.hover'+'treebox li').mouseout(function (e) {

$(this).siblings().stop().fadeTo(500,1);

});

})

</script>

</head>

<body>

<div style="color:white">jQuery突出图片列表中鼠标经过项

<br /><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm">原文</a> <a href="http://hovertree.com/texiao/">更多特效</a></div>

<div class="hovertreebox" id="hovertreelist">

<ul>

<li><img src="http://hovertree.com/texiao/jquery/1/images/01.jpg" width="200" height="186" /></li>

<li><img src="http://hovertree.com/texiao/jquery/1/images/02.jpg" width="200" height="186" /></li>

<li><img src="http://hovertree.com/texiao/jquery/1/images/03.jpg" width="200" height="186" /></li>

<li><img src="http://hovertree.com/texiao/jquery/1/images/04.jpg" width="200" height="186" /></li>

<li><img src="http://hovertree.com/texiao/jquery/1/images/05.jpg" width="200" height="186" /></li>

<li><img src="http://hovertree.com/texiao/jquery/1/images/06.jpg" width="200" height="186" /></li>

</ul>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:white;">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">HoverTree</a></p>

</div>

</body>

</html>

转自：http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

jQuery实现鼠标经过图片变亮效果的更多相关文章

  1. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  4. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  5. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  6. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

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

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

  8. jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...

  9. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

随机推荐

  1. Spring声明式事务管理

    一.Spring 的声明式事务管理概述 1.Spring 的声明式事务管理在底层是建立在 AOP 的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加入一个事务,在执行完目标方法 ...

  2. VS中行号对齐的辅助线（虚线）去除

    3张图 2 3

  3. Util应用程序框架公共操作类(五):异常公共操作类

    任何系统都需要处理错误,本文介绍的异常公共操作类,用于对业务上的错误进行简单支持. 对于刚刚接触.Net的新手,碰到错误的时候,一般喜欢通过返回bool值的方式指示是否执行成功. public boo ...

  4. 使用Windows Service Wrapper快速创建一个Windows Service

    前言 今天介绍一个小工具的使用.我们都知道Windows Service是一种特殊的应用程序,它的好处是可以一直在后台运行,相对来说,比较适合一些需要一直运行同时不需要过多用户干预的应用程序,这一类我 ...

  5. Android Studio的下载和安装教程（从ADT到AS）

    之前一直使用的是Android development tools(简称ADT),后来说是google对ADT不再提供支持,然后一直在考虑是否把自己电脑换成Android Studio(简称AS),从 ...

  6. Win8.1安装mysql-installer-community-5.6.21.0.mis

    引言 我本机是win8.1,在官网下载的这个安装是32位和64位都能装,安装步骤参考:http://jingyan.baidu.com/article/67662997305dcd54d51b84d4 ...

  7. SQL Server SQL性能优化之--数据库在“简单”参数化模式下，自动参数化SQL带来的问题

    数据库参数化的模式 数据库的参数化有两种方式,简单(simple)和强制(forced),默认的参数化默认是“简单”,简单模式下,如果每次发过来的SQL,除非完全一样,否则就重编译它(特殊情况会自动参 ...

  8. T4 模板自动生成带注释的实体类文件 - 只需要一个 SqlSugar.dll

    生成实体就是这么简单,只要建一个T4文件和 文件夹里面放一个DLL. 使用T4模板教程 步骤1 创建T4模板 ,一定要自已新建,把T4代码复制进去,好多人因为用我现成的T4报错(原因不明) 点击添加文 ...

  9. c#静态构造函数 与 构造函数 你是否还记得？

    构造函数这个概念,在我们刚开始学习编程语言的时候,就被老师一遍一遍的教着.亲,现在你还记得静态构造函数的适用场景吗?如果没有,那么我们一起来复习一下吧. 静态构造函数是在构造函数方法前面添加了stat ...

  10. 关系数据库常用SQL语句语法大全

    创建表 语法 CREATE TABLE <表名>(<列名> <数据类型>[列级完整性约束条件] [,<列名> <数据类型>[列级完整性约束条 ...