用css到做出的类似于幻灯片的图片展示的东西,先看看是什么样子吧!
当鼠标悬停在‘图片集1’上时是下面这个样子
当鼠标悬停在'图片集2'上时是下面这个样子
就是一种图片集之间切换的效果。当点击某张图片时图片就会放大。
当要在自己网页上放置多张图片时,这倒是个不错的选择。
下面就讲讲用css是怎么做出来的。
其实要做出这么个东西,只需要理解两个css里的概念就ok了。第一个就是绝对定位的概念,第二个就是伪类的概念
让我们来仔细分析一下:因为页面会在不同的鼠标状态里显示呈现不同的样子,而且是与鼠标状态相关,在css里实现这个的就只有通过:hover :avtive :focus等伪类了;还有像这样的布局,最容易做到的就是用绝对定位;
下面就是html代码:
2 < p id ="intro" >
3 我的css图片集
4 </ p >
5 < ul id ="out" >
6 < li class ="cl" >
7 < a class ="title" href ="#" > 图片集1 </ a >
8 < div >
9 < a >< img src ="img/pic1_s.jpg" class ="small" />< img src ="img/pic1.jpg" class ="big" /></ a >
10 < a >< img src ="img/pic2_s.jpg" class ="small" />< img src ="img/pic2.jpg" class ="big" /></ a >
11 < a >< img src ="img/pic3_s.jpg" class ="small" />< img src ="img/pic3.jpg" class ="big" /></ a >
12 </ div >
14 </ li >
16 < li class ="cl" >
17 < a class ="title" href ="#" > 图片集2 </ a >
18 < div >
19 < a >< img src ="img/pic4_s.jpg" class ="small" />< img src ="img/pic4.jpg" class ="big" /></ a >
20 < a >< img src ="img/pic5_s.jpg" class ="small" />< img src ="img/pic5.jpg" class ="big" /></ a >
21 < a >< img src ="img/pic6_s.jpg" class ="small" />< img src ="img/pic6.jpg" class ="big" /></ a >
22 </ div >
23 </ li >
25 </ ul > <!-- out end --> 26 </body>
结构很简单的吧!如果你的图片很多,还可以照这个样子往上加。
在来看一看css
2 list-style : none ; padding : 0 ; margin : 0 ;
3 }
5 li {
6 list-style : none ; padding : 0 ; margin : 0 ; float : left ; height : 50px ;
7 }
9 p#intro {
10 font-size : 16px ; color : #C09 ; position : absolute ; top : 50px ; left : 10px ;
11 }
12
13 /* 图片不显示 */
14 ul li.cl div {
15 display : none ;
16 }
18 /* 修饰标题 */
19 a.title {
20 display : block ; float : left ; width : 60px ; font-size : 12px ; color : #FF0 ; text-align : center ;
21 background-color : #666 ; margin-right : 5px ; padding : 5px 0 ; text-decoration : none ;
22 }
24 /* 鼠标悬停在标题上 */
25 ul li.cl:hover div {
26 display : block ; position : absolute ; top : 50px ; left : 10px ;
27 }
28
29 ul li.cl:hover div img.big {
30 display : none ;
31 }
32
33 ul li.cl:hover div {
34 width : 500px ;
35 height : 500px ;
36 }
38 ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big {
39 display : block ;
40 position : absolute ;
41 top : 0 ; left : 0 ;
42 width : 400px ; height : 400px ; }
有三个关键的地方
关键点1:ul li.cl div{display:none}
看,在正常情况下我把包含图片的div全隐藏了。
关键点2:
ul li.cl:hover div{
display:block;position:absolute;top:50px;left:10px;
}
当鼠标悬停在标题的li上时,包含图片的div就显示出来了。
关键点3:
ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big{
display:block;position:absolute;top:0;left:0;width:400px;height:400px;
}
当点击下去时,大图片就显示出来了。仔细的你或许能够发现,其实大图片这是把小图片隐藏了而已,障眼法吧!如果你的小图片太大的话,可就盖不住了哦!
呵呵,就是这个样子啊,我的css image slide 就做成了。
还有一点哦,这个在ie8里显示不正常,在ie8里点击不能出现大图片,我还没找到原因呢!ie8以前,就更算了吧!它们应该还不支持除了a标签外的伪类,所以要想在ie8以前里的ie版本里显示出来,最好都包裹个a标签。
做这么个例子,其实是么有什么大的实际意义的,我想用javascrip做或许表现的更好一点。做它,只是能够让我们发现,原来css还可以这样用啊!对css的探索本来就是一件很好玩的事吧!