jquery实现天猫商城图片变暗特效

作者：林炜贤来源：www.163css.com发表时间：(2012-01-18)

对于这个特效，估计大家非常熟悉，它就出现我们的天猫商城网站上，也许天猫商城的设计就像带着你在爬楼层一样，上面写着1F,2F,3F,4F...

左侧是我们常见的知名品牌，右侧是产品分类的图片。当我们将鼠标移至图片上时：

熟悉CSS的人都知道这是采用滤镜做出来的，但让人吃惊的是它是划过的图片变亮而其它变暗。这让我有点思考不出，按我的想法，应该是一开始是变暗的，鼠标划过才变亮。我尝试着去研究天猫商城的代码，但找不到解决方案，只知道鼠标划过时加了一个hover的样式名。

后来我放弃对淘宝代码的研究，我加了JQUERY，当鼠标划过的时候，整个图片变暗，而单独的图片加上另外一个样式名：

不过，里面的图片还是得通过定位去实现。。。

后来，有朋友告诉我，网上有人也做出来了，但它采用了：

呵呵，大家当作交流学习吧，我将两份文件都提交出来，大家可以看着使用。。。

预览地址：http://www.163css.net/net163/cssjs/2012/01/tmallblack/index.html

下载地址：jquery实现天猫商城图片变暗特效.zip