<!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>鼠标通过图片变灰效果 css和jquery</title>
<style type="text/css">
body {
height: 100%;
margin: 0;
padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
background: #fff;
position: relative;
}
h1 {
text-align: center;
font-weight: normal;
font-size: 2.5em;
}
h1 small {
display: block;
font-size: 0.7em;
color: #999;
}
img {border: none;}
ul.gallery {
width: 708px;
list-style: none;
margin: 0 auto; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix--*/
}
ul.gallery li a.thumb {
width: 204px;
height: 182px;
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333;
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
</style>
<script type="text/javascript" src="jquery.1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.gallery li").hover(function() { //On hover...这里面的this是指ul.gallery li
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver' attr() 方法设置或返回被选元素的属性值。也可用于设置属性。
//Set a background image(thumbOver) on the <a> tag
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});//由于这里的每一个a里面的背景不同是动态的，因此须要获取img里面的src。
//Fade the image to 0
$(this).find("span").stop().fadeTo('normal', 0 , function() { //stop() 方法中止当前正在运行的动画。 fadeIn() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。语法：$(selector).fadeTo(speed,opacity,callback) speed可选，opacity必填，callback可选。为fadeTo 函数执行完以后，要执行的函数。
$(this).hide(); //Hide the image after fade
});
}//注意这里。hover里面须要两个函数，这里是第一个函数的范围。
, function() { //on hover out...
//Fade the image to 1
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
/*--方法：每个img里面的图片都包含一个彩色和灰度的图片，而后将每个img里面灰度的图片赋值给a的背景，而后当鼠标通过每个img时，a上面的img就会产生渐隐效果到消失就会跟着露出a的背景，这样子就感受是动态使背景透出了，感受是鼠标通过把图片处理成灰白了，其实则否则。呵呵---*/
</script>
</head>
<body>
<h1><a href="http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/" style="color: #333; text-decoration: none;">Greyscale Hover Effect w/ CSS & jQuery</a> <small>Tutorial by <a href="http://www.sohtanaka.com" style="color: #999;">Soh Tanaka</a></small></h1>
<ul class="gallery">
<li>
<a href="http://www.designbombs.com/portfolio/sushi-robots/" class="thumb"><span><img src="sushiandrobots_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/portfolio/sushi-robots/">Sushi & Robots</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/blog/garys-real-life/" class="thumb"><span><img src="garysreallife_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/blog/garys-real-life/">Gary's Life</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/ecommerce/cube-scripts/" class="thumb"><span><img src="cubescripts_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/ecommerce/cube-scripts/">Cube Scripts</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/portfolio/ryan-keiser/" class="thumb"><span><img src="ryankeiser_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/portfolio/ryan-keiser/">Ryan Keiser</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/blog/ricardo-gimenes/" class="thumb"><span><img src="ricardogimenes_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/blog/ricardo-gimenes/">Ricardo Gimenes</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/blog/food-tease/" class="thumb"><span><img src="foodtease_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/blog/food-tease/">Food Tease</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/ecommerce/lemonstand/" class="thumb"><span><img src="lemonstandapp_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/ecommerce/lemonstand/">Lemon Stand</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/blog/hey-indy/" class="thumb"><span><img src="heyindy_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/blog/hey-indy/">Hey Indy</a></h2>
</li>
<li>
<a href="http://www.designbombs.com/design-firm/ngen-works/" class="thumb"><span><img src="ngenworks_thumb.gif" alt="" /></span></a>
<h2><a href="http://www.designbombs.com/design-firm/ngen-works/">nGen Works</a></h2>
</li>
</ul>
</body>
</html>