求淘宝商城的图片鼠标上去变暗亮效果

哪位大侠有做过的能给提供下么？或者技术高的能帮忙给拿下来么？
首页东西太多下载下来没有效果，搞了很多天了
http://www.tmall.com/大幻灯上有那个效果，下面的商品显示的也有那个效果

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

到51js.com上面搜索一下，这种源码应该有许多。
<html>
<head>
<title>test</title>
<script type="text/javascript" >
function opacity_change(m){
var oDiv=document.getElementById("imgInfo");
if(m==0)
oDiv.filters.alpha.opacity-=5
else
oDiv.filters.alpha.opacity+=5
timer=setTimeout(function(){opacity_change(m)},30)
if(oDiv.filters.alpha.opacity<=60 || oDiv.filters.alpha.opacity>89) clearTimeout(timer)}
</script>
</head>
<body>
<img id="imgInfo" src="http://www.i9797.com/upload/image/12378011047961.jpg" style="filter: alpha(opacity=90);" onmouseover="opacity_change(0)" onmouseout="opacity_change(1)"/>
</body>
</html>这种效果你看看可以不
多谢missde老兄，找了很久没找到呢楼上yang_hsu老兄，比你这个效果复杂多了，是有很多张图片，鼠标上去一个图片，其他的图片都要变暗
鼠标滑过除去所有灰色样式（on）,给某一个加上样式（on）,鼠标移开除去全部灰色样式（on） li 是图片css.on{background-color:#000;filter: alpha(opacity=70);}
JS
//  鼠标滑过
  $("#showtype li").mouseover(
  function()
  {
$("#showtype li").removeClass("on");
    $(this).addClass("on");
  }
  );      // 鼠标离开
  $("#showtype li").mouseout(
  function()
  {
    $("#showtype li").removeClass("on");
  }
  );
最后还是在蓝色理想论坛里的朋友帮忙给做出来了，感谢下他，也感想下各位的帮忙代码我帖出来大家以后可以用
<!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>无标题文档</title>
<style type="text/css">
body{ background:#333;}
.box{ width:560px;}
.box li{ list-style:none; float:left; margin-right:4px; cursor:pointer; margin-bottom:4px;}.box1{ width:560px;}
.box1 li{ list-style:none; float:left; margin-right:4px; cursor:pointer; margin-bottom:4px;}
</style>
<script type="text/javascript">
window.onload = function(){
addEffect("box");
addEffect("box1");
}
/**
* @param cn--要获取的class
*/
function addEffect(cn){
var countArr = [];
var obj = getClass(document.body,cn);
for( var j=0;j<obj[0].getElementsByTagName("li").length;j++){
var liObj = obj[0].getElementsByTagName("li")[j];
countArr.push(liObj);
liObj.onmouseover = function(){
for(var k=0;k<countArr.length;k++){
startMove(countArr[k],{opacity:50});
}
startMove(this,{opacity:100});
}
liObj.onmouseout = function(){
for(var k=0;k<countArr.length;k++){
startMove(countArr[k],{opacity:100});
}
}
}
}
/**
* 通过class获取对象
*/
function getClass(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
/**
* 动作类
* 用法：
* startMove(目标对象 ,目标属性(多个), 动作完成后执行(fun))
*/
function startMove(target, object, onComplete){
if(target.timer)clearInterval(target.timer);
target.timer = setInterval(function (){
doMove(target, object, onComplete);
}, 30);
}
function getStyle(target, attr){
return target.currentStyle?target.currentStyle[attr]:getComputedStyle(target, false)[attr];
}
function doMove(target, object, onComplete){
var iCur = 0;
var attr = '';
var bStop = true;
for(attr in object){
attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(target, 'opacity'))*100) : iCur = parseInt(getStyle(target, attr));
if(isNaN(iCur))iCur = 0;
if(navigator.userAgent.indexOf("Firefox") > 0){
var iSpeed = (object[attr]-iCur) / 3;
}else{
var iSpeed = (object[attr]-iCur) / 3;
}
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(parseInt(object[attr])!=iCur)bStop = false;
if(attr=='opacity'){
target.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
target.style.opacity = (iCur + iSpeed) / 100;
}else{
attr == 'zIndex' ? target.style[attr] = iCur + iSpeed : target.style[attr] = iCur + iSpeed +'px';
}
}
if(bStop){
clearInterval(target.timer);
target.timer = null;
if(onComplete)onComplete();
}
}
</script>
</head><body>
<div class="box">
<ul>
     <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
    </ul>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box1">
<ul>
     <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
        <li><img src="http://img1.qq.com/news/pics/6638/6638749.gif" /></li>
    </ul>
</div>
</body>
</html>