效果的原理
原理其实很简单,首先给一个黑色的背景,通过降低图片的透明度,让黑色背景呈现出来,图片看起来就更暗。鼠标移到图片1,那么就让除了图片1的其他图片的透明度降低,让他们看起来更暗,让图片1看起来显得更亮
用两种方法来实现:
CSS方法和JS方法
JS方法
效果实例
先看看HTML代码和CSS代码
HTML代码:
1
2
3
4
5
|
<
div
class
=
"imglist"
>
<
a
href
=
"#"
><
img
src
=
"images/530_1.jpg"
></
a
>
<
a
href
=
"#"
><
img
src
=
"images/530_2.jpg"
></
a
>
<
a
href
=
"#"
><
img
src
=
"images/530_3.jpg"
></
a
>
</
div
>
|
CSS代码,都很简单:
1
2
|
.imglist {
float
:
left
;
width
:
580px
;}
.imglist a{
float
:
left
;
background-color
:
#000
;}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(
function
(){
$(
".imglist"
).find(
"a"
).each(
function
(){
$(
this
).hover(
function
(){
//当鼠标移上去时
//它的兄弟图片透明度降到0.7
$(
this
).siblings().find(
"img"
).stop().fadeTo(
"slow"
,0.7);
},
function
(){
//当鼠标移出的时候
//它的兄弟图片透明度回到1
$(
this
).siblings().find(
"img"
).stop().fadeTo(
"slow"
,1);
});
});
})
|
这里解释为什么要用stop()方法,是为了防止有人在区域内,快速移动,导致fadeTo动画效果频繁执行,造成CPU占用率过高。所以在下一个fadeTo动画执行开始的时候,把前面还没有执行完的fadeTo动画停止掉
CSS方法
CSS按照前面的原理实现起来也是非常简单的,只是为了兼容IE6实现起来麻烦一些,后面我会专门讲到。
HTML代码不变,CSS代码在原来的基础上进行修改
1
2
3
4
5
6
7
8
|
.imglist:hover img{
opacity:
0.7
;
filter:alpha(opacity=
70
);
}
.imglist:hover img:hover{
opacity:
1
;
filter:alpha(opacity=
100
);
}
|
到这其实效果已经出来了,但没有JQuery效果那么漂亮,没有过渡效果;呵呵,再来加几句代码
1
2
3
4
5
|
.imglist img{
-moz-transition:opacity .
7
s cubic-bezier(
0.2
,
0.4
,
0.7
,
0.8
);
-webkit-transition:opacity .
7
s cubic-bezier(
0.2
,
0.4
,
0.7
,
0.8
);
transition:opacity .
7
s cubic-bezier(
0.2
,
0.4
,
0.7
,
0.8
);
}
|
在IE10,火狐,谷歌等高级浏览器中可以看到过渡的效果了,IE10以下的IE没有过渡效果
效果实例
上面的代码其实已经兼容了大部分浏览器了,但坑爹的IE6还没效果,因为IE6不支持a标签以外的:hover元素。有兴趣的人可以利用IE条件注释自己写个兼容代码兼容IE6