用CSS制作一个ImageView,类似一个相册浏览的功能,重点研究一下层与布局,调用了一个远程Google的文件,整体效果感觉不错
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS相册浏览</title> <script src="http://www./urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-780254-3"; urchinTracker(); </script> <style type="text/css"> h2,ul,li{margin:0;padding:0;list-style:none;} img{border:0;} .imgview{ position:absolute; top:30px; z-index:80; float:left; width:857px; height:auto; min-height:440px; } .imgview a{ text-decoration:none; } .imgview h2{ position:absolute; top:10px; left:10px; width:290px; height:30px; background-color:#FFFFFF; color:#000000; font-size:1.2em; text-indent:10px; line-height:30px; } .imgview ul{ position:absolute; top:48px; left:10px; z-index:90; width:290px; height:auto; min-height:230px; background-color:#FFFFFF; } .imgview ul li{ float:left; width:82px; height:59px; margin:8px 6px 7px; border:1px solid #DEDEDE; } .imgview ul li strong{ display:none; } .imgview ul li a:hover{ display:block; width:100%; height:100%; } .imgview ul li a:focus strong, .imgview ul li a:active strong{ display:block; position:absolute; top:350px; left:300px; z-indent:100; width:537px; height:30px; background-color:#FFFFFF; color:#000000; text-indent:10px; line-height:30px; } .imgview ul li a:hover span img{ position:absolute; top:240px; left:1px; width:200px; height:140px; } .imgview ul li a:active span img, .imgview ul li a:focus span img{ position:absolute; top:-38px; left:300px; z-index:90; width:537px; height:380px; } .imgview ul li img{ width:80px; height:57px; } .imgview .imgview-rep{ position:absolute; top:287px; left:10px; z-index:10; width:201px; height:140px; border:1px solid #999999; color:#EFEFEF; font-size:2em; text-align:center; line-height:140px; } .imgview .imgview-bgtext{ position:absolute; top:9px; left:309px; z-index:10; width:537px; height:380px; border:1px solid #999999; color:#EFEFEF; font-size:5em; text-align:center; line-height:380px; } .imgtag{ position:absolute; top:130px; left:10px; } .imgtag .tagname{ float:left; width:100px; height:30px; text-align:center; line-height:30px; cursor:pointer; } .imgtag .tag1 .imgtag .tag2, .imgtag .tag3{ position:absolute; left:0; width:100px; } .imgtag .tag1{ position:absolute; left:0; background-color:#BCC8C3; } .imgtag .tag1 .imgview{ left:0; background-color:#BCC8C3; } .imgtag .tag2{ position:absolute; left:102px; background-color:#BFB6B4; } .imgtag .tag2 .imgview{ display:none; } .imgtag .tag2:hover .imgview{ display:block; left:-102px; z-index:80; background-color:#BFB6B4; } .imgtag .tag3{ position:absolute; left:204px; background-color:#CCC8BF; } .imgtag .tag3 .imgview{ display:none; } .imgtag .tag3:hover .imgview{ display:block; left:-204px; z-index:80; background-color:#CCC8BF; } content:".";
display:block; height:0; clear:both; visibility:hidden; } </style> </head> <body> <p>CSS图片浏览效果</p> <div class="imgtag"> <div class="tag1"> <!--[if lte IE 6]><a href="#1" class="taga1"><![endif]--> <div class="tagname">分类一</div> <div class="imgview"> <div class="imgview-bgtext">PhotoView</div> <div class="imgview-rep">PhotoView</div> <h2>Photogallery 01</h2> <ul> <li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="/jscss/demoimg/photo01.gif" alt="photo1" /></span></a></li> <li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="/jscss/demoimg/photo02.gif" alt="photo2" /></span></a></li> <li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="/jscss/demoimg/photo03.gif" alt="photo3" /></span></a></li> <li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="/jscss/demoimg/photo04.gif" alt="photo4" /></span></a></li> <li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="/jscss/demoimg/photo05.gif" alt="photo5" /></span></a></li> <li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="/jscss/demoimg/photo06.gif" alt="photo6" /></span></a></li> <li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="/jscss/demoimg/photo07.gif" alt="photo7" /></span></a></li> <li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="/jscss/demoimg/photo08.gif" alt="photo8" /></span></a></li> <li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="/jscss/demoimg/photo09.gif" alt="photo9" /></span></a></li> </ul> </div> <!--[if lte IE 6]></a><![endif]--> </div> <div class="tag2"> <!--[if lte IE 6]><a href="#2" class="taga2"><![endif]--> <div class="tagname">分类二</div> <div class="imgview"> <div class="imgview-bgtext">PhotoView</div> <div class="imgview-rep">PhotoView</div> <h2>Photogallery 02</h2> <ul> <li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="/jscss/demoimg/photo03.gif" alt="photo3" /></span></a></li> <li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="/jscss/demoimg/photo02.gif" alt="photo2" /></span></a></li> <li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="/jscss/demoimg/photo05.gif" alt="photo5" /></span></a></li> <li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="/jscss/demoimg/photo06.gif" alt="photo6" /></span></a></li> <li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="/jscss/demoimg/photo07.gif" alt="photo7" /></span></a></li> <li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="/jscss/demoimg/photo01.gif" alt="photo1" /></span></a></li> <li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="/jscss/demoimg/photo08.gif" alt="photo8" /></span></a></li> <li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="/jscss/demoimg/photo04.gif" alt="photo4" /></span></a></li> <li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="/jscss/demoimg/photo09.gif" alt="photo9" /></span></a></li> </ul> </div> <!--[if lte IE 6]></a><![endif]--> </div> <div class="tag3"> <!--[if lte IE 6]><a href="#3" class="taga3"><![endif]--> <div class="tagname">分类三</div> <div class="imgview"> <div class="imgview-bgtext">PhotoView</div> <div class="imgview-rep">PhotoView</div> <h2>Photogallery 03</h2> <ul> <li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="/jscss/demoimg/photo02.gif" alt="photo2" /></span></a></li> <li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="/jscss/demoimg/photo04.gif" alt="photo4" /></span></a></li> <li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="/jscss/demoimg/photo05.gif" alt="photo5" /></span></a></li> <li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="/jscss/demoimg/photo03.gif" alt="photo3" /></span></a></li> <li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="/jscss/demoimg/photo01.gif" alt="photo1" /></span></a></li> <li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="/jscss/demoimg/photo08.gif" alt="photo8" /></span></a></li> <li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="/jscss/demoimg/photo06.gif" alt="photo6" /></span></a></li> <li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="/jscss/demoimg/photo07.gif" alt="photo7" /></span></a></li> <li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="/jscss/demoimg/photo09.gif" alt="photo9" /></span></a></li> </ul> </div> <!--[if lte IE 6]></a><![endif]--> </div> </div> </body> </html> |
|