在线体验效果：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. MVC validate.js下使用 ajaxSubmit

    首页定义验证实体 using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace MvcApplication ...

  2. Jetty Maven Plugin配置

    官方文档:http://www.eclipse.org/jetty/documentation/current/jetty-maven-plugin.html#maven-config-https 1 ...

  3. Sql Server系列：Select基本语句

    1 T-SQL中SELECT语法结构 <SELECT statement> ::= [WITH <common_table_expression> [,...n]] <q ...

  4. jQuery源码分析系列(40）: 动画设计

    前言 jQuery动画是通过animate这个API设置执行的,其内部也是按照每一个animate的划分封装了各自动画组的行为, 包括数据过滤.缓动公式.一些动画默认参数的设置.元素状态的调整.事件的 ...

  5. WPF调用Matlab函数方法

    有的时候用C#写图像处理方法,比较费事,不如Matlab简单,但是Matlab又做不出WPF那样的好看界面,怎么办呢. 今天正好我要实现这个功能,就顺便写个小例子,给需要的人做个借鉴. 想要用WPF调 ...

  6. jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数:  value: 对应字段的当前列的值  record: 当前行的记录数据  复制代码 代码如下: $('#tt' ...

  7. 关于Docker目录挂载的总结

    Docker容器启动的时候,如果要挂载宿主机的一个目录,可以用-v参数指定. 譬如我要启动一个centos容器,宿主机的/test目录挂载到容器的/soft目录,可通过以下方式指定: # docker ...

  8. 附录C 编译安装Hive

    如果需要直接安装Hive,可以跳过编译步骤,从Hive的官网下载编译好的安装包,下载地址为http://hive.apache.org/downloads.html . C.1  编译Hive C.1 ...

  9. ZOJ Problem Set - 1240 IBM Minus One

    水题不解释,就是注意下格式,没输出一行字符串记得加一个空白行 #include <stdio.h> #include <string.h> int main() { ; ]; ...

  10. Cesium原理篇：7最长的一帧之Entity(下)

    上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...