首页 > 网页特效 > 图片特效 > 仿天猫商城鼠标划过图片变暗的jquery特效代码

仿天猫商城鼠标划过图片变暗的jquery特效代码

时间:2012-04-20    来源:163CSS

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

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

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

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

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

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

演示效果1 演示效果2

特效推荐

热门特效