当前位置：首页 → 问答吧 → 这个效果如何做

这个效果如何做

时间：2010-05-10

来源：互联网

http://www.asos.com 首页的图片效果，鼠标移到一张图片其余图片全部变成灰色。

作者: loethen 发布时间: 2010-05-10

我顶！！！不知道是不是判断焦点来实现的，那位大侠能给下实例就好了。在此谢过

作者: loethen 发布时间: 2010-05-10

大概是这样，整个图片区（所有图片的容器）的背景是黑色（无所谓是什么色），鼠标移到某个图片上时，改变其它图片的透明度。用jQuery的话，应该很简单了。

作者: ambushaa 发布时间: 2010-05-10

<!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> <title></title> <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(function() { $("img").mouseover(function() { $("img").each(function() { $(this).get(0).style.filter = "alpha(opacity=50)"; }); $(this).get(0).style.filter = "alpha(opacity=100)"; }).mouseout(function() { $("img").each(function() { $(this).get(0).style.filter = "alpha(opacity=100)"; }); }); }); </script> </head> <body> <div id="main" style="background:#000;width:228px;"><img src="http://home.blueidea.com/attachment/201005/10/76563_12735025741A74.jpg.thumb.jpg" /><img src="http://home.blueidea.com/attachment/201005/10/76563_1273502574Lvrw.jpg.thumb.jpg" /><img src="http://home.blueidea.com/attachment/201005/10/76563_12735025749ldr.jpg.thumb.jpg" /></div> </body> </html>
提示：您可以先修改部分代码再运行

只做了针对IE的，其它浏览器的透明要另写。
另外，再增加一点透明时的渐变基本上就差不多了。
运行时，打开新窗口请刷新一次。

[ 本帖最后由 ambushaa 于 2010-5-10 22:50 编辑 ]

作者: ambushaa 发布时间: 2010-05-10

谢谢楼上的

作者: loethen 发布时间: 2010-05-11

修改了下对浏览器的支持更广及加了渐显效果

<!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> <title></title> <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(function() { $("img").mouseover(function() { $("img").each(function() { $(this).css("opacity","0.6"); }); $(this).fadeTo("slow","1"); }).mouseout(function() { $("img").each(function() { $(this).css("opacity","1.0"); }); }); }); </script> </head> <body> <div id="main" style="background:#000;width:228px;"><img src="http://home.blueidea.com/attachment/201005/10/76563_12735025741A74.jpg.thumb.jpg" /><img src="http://home.blueidea.com/attachment/201005/10/76563_1273502574Lvrw.jpg.thumb.jpg" /><img src="http://home.blueidea.com/attachment/201005/10/76563_12735025749ldr.jpg.thumb.jpg" /></div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 limingziqiang 于 2010-5-11 16:20 编辑 ]

作者: limingziqiang 发布时间: 2010-05-11

谢谢楼上的~~

作者: loethen 发布时间: 2010-05-12

结贴~~~

[ 本帖最后由 loethen 于 2010-5-19 10:54 编辑 ]

作者: loethen 发布时间: 2010-05-19