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

以下是完整源代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery实现鼠标经过图片变亮效果 - 何问起</title><base target="_blank" />
  6. <style type="text/css">
  7. a {color:white;}
  8. body{background:#000;}
  9. body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
  10. .hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}
  11. .hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
  12. </style>
  13. <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
  14. <script type="text/javascript">
  15. $(function(){
  16. $('.hovertreebox li').mouseover(function (e) {
  17. $(this).siblings().stop().fadeTo(500,0.4);
  18. });
  19. $('.hover'+'treebox li').mouseout(function (e) {
  20. $(this).siblings().stop().fadeTo(500,1);
  21. });
  22. })
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <div style="color:white">jQuery突出图片列表中鼠标经过项
  28. <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>
  29. <div class="hovertreebox" id="hovertreelist">
  30. <ul>
  31. <li><img src="http://hovertree.com/texiao/jquery/1/images/01.jpg" width="200" height="186" /></li>
  32. <li><img src="http://hovertree.com/texiao/jquery/1/images/02.jpg" width="200" height="186" /></li>
  33. <li><img src="http://hovertree.com/texiao/jquery/1/images/03.jpg" width="200" height="186" /></li>
  34. <li><img src="http://hovertree.com/texiao/jquery/1/images/04.jpg" width="200" height="186" /></li>
  35. <li><img src="http://hovertree.com/texiao/jquery/1/images/05.jpg" width="200" height="186" /></li>
  36. <li><img src="http://hovertree.com/texiao/jquery/1/images/06.jpg" width="200" height="186" /></li>
  37. </ul>
  38. </div>
  39.  
  40. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:white;">
  41. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  42. <p>来源：<a href="http://hovertree.com/" target="_blank">HoverTree</a></p>
  43. </div>
  44. </body>
  45. </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. C#学习系列-文章导航

    C#学习系列-.NET体系结构 C#学习系列-类与结构的区别 C#学习系列-String与string的区别 C#学习系列-抽象方法与虚拟方法的区别 C#学习系列-out与ref的区别 C#学习系列- ...

  2. JS原生第七篇 （帅哥）

    1.1 复习 offset   自己的 偏移 offsetWidth    得到自己的宽度 offsetHeight 构成 :   width  +   padding  +  border div ...

  3. JS原生第六篇 （帅哥）

    复习 按钮不可用    disabled =  "disabled"  ||  true setTimeout   只执行一次    setInterval  执行很多次 递归调用 ...

  4. Python标准模块--linecache

    1.模块简介 linecache主要用于缓存文件内容,如果下次继续读取该文件,则不需要打开文件,直接在缓存中获取该文件内容. 2.模块使用 模块的基本方法有getline,clearcache,get ...

  5. VMware Tools的简易安装---解决Ubuntu 14.10不能满屏显示问题

    由于使用的VMware WorkStation是中文破解版,安装时又是简易安装,因此VMware Tools并没有安装上,导致Ubuntu 14.10在VMware中装上之后,并不能满屏显示,如图1所 ...

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

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

  7. 关于z-index鲜为人知的事情

    关于z-index很少有人去深入的了解它,因为它看起来一点儿也不复杂,不就是谁的数字大,谁就显示在前面吗?然而今天所摘录的这篇博文,让我震惊了.我承认我从来没有花时间去看具体的z-index相关文档, ...

  8. js 利用throw 写的一个小程序

    在下边的小程序中比较特殊的是使用isNaN()函数判断一个参数是不是数字, <!DOCTYPE html> <!DOCTYPE html> <html> <h ...

  9. Oracle Recovery 01 - 常规恢复之完全恢复

    背景:这里提到的常规恢复指的是数据库有完备可用的RMAN物理备份. 实验环境:RHEL6.4 + Oracle 11.2.0.4 DG primary. 一.常规恢复之完全恢复:不丢失数据 1.1 单 ...

  10. Masonry_设置比例

    [self.bgView addSubview:self.progressImageView]; [self.progressImageView mas_makeConstraints:^(MASCo ...