<!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>