用CSS制作制作一个照片演示特效代码

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

CSS代码

以下是引用片段:

#info {

position:relative;

background:#fff url(../../updata/pic1b.gif) 175px 44px no-repeat;}

#scrollbox {

width:400px;

height:80px;

background:#f4f4f4;

overflow:auto;

border:1px solid #aaa;

margin-left:175px;

margin-top:70px;}

a.gallery, a.gallery:visited {

display:block;

color:#000;

ext-decoration:none;

border:1px solid #000;

width:75px;

height:47px;

margin:3px;

float:left;}

a.slidea {background:url(../../updata/thumb2.jpg);}

a.slideb {background:url(../../updata/thumb3.jpg);}

a.slidec {background:url(../../updata/thumb4.jpg);}

a.slided {background:url(../../updata/thumb5.jpg);}

a.slidee {background:url(../../updata/thumb6.jpg);}

a.slidef {background:url(../../updata/thumb7.jpg);}

a.slideg {background:url(../../updata/thumb8.jpg);}

a.slideh {background:url(../../updata/thumb9.jpg);}

a.slidei {background:url(../../updata/thumb10.jpg);}

a.slidej {background:url(../../updata/thumb11.jpg);}

a.gallery span {

display:block;

position:absolute;

left:150px;

top:-1px;

width:1px;

height:1px;

overflow:hidden;

background:#efedec;

z-index:100;}

a.gallery:hover {white-space:normal; border:1px solid #fff;}

a.gallery:hover img {border:1px solid #000; z-index:100;}

a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}

a.gallery:hover span {

display:block;

position:absolute;

width:402px;

height:290px;

top:39px;

left:170px;

padding:5px;

font-style:italic;

color:#000;

background:#fff;

z-index:100;}

a.gallery:active {border:1px solid #eee;}

a.gallery:active span, a.gallery:focus span {

display:block;

position:absolute;

width:402px;

height:290px;

top:39px;

left:170px;

padding:5px;

font-style:italic;color:#000; background:#fff; z-index:50;}

#thumbs {width:840px; height:60px;}

#pad {height:310px; width:100px;}

针对IE6

以下是引用片段:

<!--[if lte IE 6]>

<style>

#ads {display:none;}

#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}

</style>

<![endif]-->

XHTML部分

以下是引用片段:

<div id="info">

<div id="pad"></div>

<div class="slidek"></div>

<div id="scrollbox">

<div id="thumbs">

<a class="gallery slidea" href="#nogo" title="Fishes">

<span><img src="../../updata/pic2.jpg" alt="Fishes" title="Fishes" />

<br />pic2.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slideb" href="#nogo" title="Funnels">

<span><img src="../../updata/pic3.jpg" alt="Funnels" title="Funnels" />

<br />pic3.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slidec" href="#nogo" title="Vases">

<span><img src="../../updata/pic4.jpg" alt="Vases" title="Vases" />

<br />pic4.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slided" href="#nogo" title="Window">

<span><img src="../../updata/pic5.jpg" alt="Window" title="Window" />

<br />pic5.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slidee" href="#nogo" title="Cascade">

<span><img src="../../updata/pic6.jpg" alt="Cascade" title="Cascade" />

<br />pic6.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slidef" href="#nogo" title="Cascade">

<span><img src="../../updata/pic7.jpg" alt="Flowers" title="Flowers" />

<br />pic7.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slideg" href="#nogo" title="Cascade">

<span><img src="../../updata/pic8.jpg" alt="Butterfly" title="Butterfly" />

<br />pic8.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slideh" href="#nogo" title="Cascade">

<span><img src="../../updata/pic9.jpg" alt="Birds" title="Birds" />

<br />pic9.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slidei" href="#nogo" title="Cascade">

<span><img src="../../updata/pic10.jpg" alt="Shells" title="Shells" />

<br />pic10.jpg<br />Photographs courtesy of morgueFile.com</span></a>

<a class="gallery slidej" href="#nogo" title="Cascade">

<span><img src="../../updata/pic11.jpg" alt="Fishing" title="Fishing" />

<br />pic11.jpg<br />Photographs courtesy of morgueFile.com</span></a>

</div>

</div>查看效果:http://www.cssplay.co.uk/menu/scroll_gallery.html

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航