这个是看了鬼佬的一篇文章之后参考他的代码写的,终于感觉到鬼佬的创意了.而同时感觉我们缺少的只是创意,而并不是技术,也许这个就是国家之间的差异吧.
body{font:12px Georgia, 'Times New Roman', Times, serif; text-align:center;
background:#9c9a9c;}
img{border:0;}
h1{background:#638AAD;
font-size:14px; color:#fff;
font-weight:bold;
padding:5px 0;}
#one{ margin:10px auto; list-style:none; background:url(../images/photo_06.jpg) no-repeat; width:595px; height:300px; overflow:auto; }
#one li{ float:left; display:block; border-right:1px solid #000; }
a{ display:block; text-decoration:none; cursor:default; margin:0; }
#one a:link,#one a:visited{ width:30px; height:300px; overflow:hidden; }
#one a:link img{ width:30px; height:300px; border:0;}
#one a:hover{ width:436px; height:300px; }
#one a:hover img{ width:436px;}
#two{ margin:10px auto; width:436px; height:425px; list-style:none; background:url(../images/photo_07.jpg); display:block;}#two li{ display:block; border-bottom:1px solid #000; margin-top:0 !important; margin-top:-3px; }#two a:link,#two a:visited{ width:436px; height:30px; overflow:hidden; }#two a:link img{ width:436px; height:30px; display:inline; }#two a:hover{ height:300px; width:436px; }#two a:hover img{ height:300px;}#back{ margin:10px auto;}#back a{ width:40px; cursor:pointer; padding:5px 0; margin: 0 0 0 480px !important; margin:0;}#back a:link,#back a:visited{ background:#dedfce; color:#4b648c; }#back a:hover{ color:#cc3300;}
列型<ul id="one"><li><a href="#">
<img src="../images/photo_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_04.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_05.jpg" alt="" /></a></li></ul>树型
<ul id="two"><li><a href="#"><img src="../images/photo_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_04.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_05.jpg" alt="" /></a></li></ul>
从代码中可以看到,主要是a在起作用.
不过这里还有一个问题,就是树型在ie下有bug的,不知道为什么每张图片之间总是有那么几个象素的空隙,
因此在看图片的时候可以看到横向和竖向都有滚动条,想了很久,还是解决不了.
原始状态和鼠标经过的状态
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=646500
