在线体验效果：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. SSISDB2：使用TSQL执行Package

    在SSISDB中,能够使用TSQL脚本执行Package:每执行一次Package,SSIS都会创建一个Operation 和一个执行实例(Execution Instance),每个Executio ...

  2. SSIS 参数的值

    一,SSIS Parameter Value 的type 一个Parameter的Value共有三种类型,分别是Design Value,Server Value,Execution Value. D ...

  3. MyEclipse 2014（激活）

    激活 破解附件包下载:http://pan.baidu.com/s/1c27Dwe0 提取密码:qy38 详细破解步骤请参考:http://blog.my-eclipse.cn/myeclipse-2 ...

  4. Android入门(二十二)解析JSON

    原文链接:http://www.orlion.ga/687/ 解析JSON的方式有很多,主要有官方提供的 JSONObject,谷歌的开源库 GSON.另外,一些第三方的开源库如 Jackson.Fa ...

  5. Android 设置对话框全屏

    1.在styles.xml中添加一个style: <style name="Dialog_Fullscreen"> <item name="androi ...

  6. 记一次ASP.NET MVC性能优化（实际项目中）

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  7. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

  8. iOS开发之SQLite-C语言接口规范(一)——Ready And Open Your SQLite

    为什么要搞一搞SQLite的C语言接口规范呢? 因为在做iOS开发中难免会遇到操作数据库的情况,你可以使用第三方的FMDB等,或者使用CoreData.但我们还是有必要去搞清楚如何去使用SQLite的 ...

  9. javascript中异步和闭包产生的困惑

    这里我不打算大谈特谈什么是异步,什么是闭包,这些内容在博客园都已经写的够多的了,但是这些内容出现的多,并不代表所有初学者都已经撑握了,所以我还是打算,用一个比较常见的示例来分析一下,或许能让对这个问题 ...

  10. java 中多线程之间的通讯之等待唤醒机制

    wait notify () nitifyAll () 都使用在同步中,因为要对持有监视器(锁)的线程操作 所以要使用在同步中,因为只有同步才具有锁 为什么这些操作线程的方法要定义object类中呢 ...