打印

做了一个相册的效果！

jdjia [楼主]

秀才

金牌会员

帖子: 3798
体力: 4425
威望: 63
当前: 上海徐汇
离线: 1 天

专长 Flash,前端制作,PHP

1^# 大中小发表于 2006-7-9 00:59

以下就是效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test div</title>
<style>
body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
span{visibility:hidden; position:absolute; overflow:hidden;}
ul,li{ list-style:none; margin:0; padding:0;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible; margin-left:-500px;}
#info img{ width:400px; height:280px; border:7px solid #FFFFFF}
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}
.b1{ background:url(http://www.zishu.cn/images/b1.jpg)}
.b2{ background:url(http://www.zishu.cn/images/b2.jpg)}
.b3{ background:url(http://www.zishu.cn/images/b3.jpg)}
.b4{ background:url(http://www.zishu.cn/images/b4.jpg)}
.b5{ background:url(http://www.zishu.cn/images/b5.jpg)}
.b6{ background:url(http://www.zishu.cn/images/b6.jpg)}
</style>
</head>
<body>
<div id="info">
  <h3>子鼠的CSS相册</h3>
  <div id="zs">
    <ul>
      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="http://www.zishu.cn/images/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="http://www.zishu.cn/images/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b3 z" target="_blank" title="照片3"><span><img src="http://www.zishu.cn/images/a3.jpg" alt="照片3" /><br />
        这是照片3<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b4 z" target="_blank" title="照片4"><span><img src="http://www.zishu.cn/images/a4.jpg" alt="照片4" /><br />
        这是照片4<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b5 z" target="_blank" title="照片5"><span><img src="http://www.zishu.cn/images/a5.jpg" alt="照片5" /><br />
        这是照片5<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b6 z" target="_blank" title="照片6"><span><img src="http://www.zishu.cn/images/a6.jpg" alt="照片6" /><br />
        这是照片6<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="http://www.zishu.cn/images/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="http://www.zishu.cn/images/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.zishu.cn</span></a></li>
    </ul>
  </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[lol]这些代码不是最优的，我正在想更好的。[3]

复制内容到剪贴板

代码:

<style>

body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }

#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}

h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}

span{visibility:hidden; position:absolute; overflow:hidden;}

ul,li{ list-style:none; margin:0; padding:0;}

a:active,a:hover{ cursor:pointer}

a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible; margin-left:-500px;}

#info img{ width:400px; height:280px; border:7px solid #FFFFFF}

#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}

.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}

.b1{ background:url(images/b1.jpg)}

.b2{ background:url(images/b2.jpg)}

.b3{ background:url(images/b3.jpg)}

.b4{ background:url(images/b4.jpg)}

.b5{ background:url(images/b5.jpg)}

.b6{ background:url(images/b6.jpg)}

</style>

复制内容到剪贴板

代码:

<div id="info">

  <h3>子鼠的CSS相册</h3>

  <div id="zs">

    <ul>

      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="images/a1.jpg" alt="照片1" /><br />

        这是照片1<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="images/a2.jpg" alt="照片2" /><br />

        这是照片2<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b3 z" target="_blank" title="照片3"><span><img src="images/a3.jpg" alt="照片3" /><br />

        这是照片3<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b4 z" target="_blank" title="照片4"><span><img src="images/a4.jpg" alt="照片4" /><br />

        这是照片4<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b5 z" target="_blank" title="照片5"><span><img src="images/a5.jpg" alt="照片5" /><br />

        这是照片5<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b6 z" target="_blank" title="照片6"><span><img src="images/a6.jpg" alt="照片6" /><br />

        这是照片6<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="images/a1.jpg" alt="照片1" /><br />

        这是照片1<br />

        www.zishu.cn</span></a></li>

      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="images/a2.jpg" alt="照片2" /><br />

        这是照片2<br />

        www.zishu.cn</span></a></li>

    </ul>

  </div>

</div>

原贴地址为：http://www.zishu.cn/blogview.asp?logID=459

本帖最近评分记录

经典论坛大妈威望 +3 历史打分 2006-7-9 00:59

（子鼠）我的BLOG：www.zishu.cn www.d1ll.com

TOP

做西部数码代理.Cn1元国际45元

12001200

新手上路

帖子: 10
体力: 0
威望: 0
离线: 775 天

2^# 大中小发表于 2006-7-9 09:56

好好呀

TOP

【美橙超级G空间】688元绑定10个子目录 | 500M免费网盘空间，文件永久保留，专业服务高端设计人员

12001200

新手上路

帖子: 10
体力: 0
威望: 0
离线: 775 天

3^# 大中小发表于 2006-7-9 09:59

好好呀

TOP

请大家尊重和保护奥运知识产权。

youmentang

中级会员

帖子: 176
体力: 345
威望: 0
离线: 10 天

4^# 大中小发表于 2006-7-9 11:01

效果不错，用纯css就能达到这个效果真是不错。向你学习。

TOP

您知道经典哪些会员写过书的吗？

您知道互联网职业和技能有哪些吗？

您知道网站运营核心是什么吗？

greengnn

酒酣几度

荣誉管理团队

帖子: 1062
体力: 1619
威望: 114
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作,PHP

5^# 大中小发表于 2006-7-10 01:09

很棒，我也来体验一下，相册就应该有个初始的图片！而且visibility: visible; 虽然不可见了，但是所占据的物理位置还是存在。可是我用display替代了它，反向滑动鼠标就失效了，也懒得测试了，就先这样！

PS：图片很PP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test div</title>
<style>
body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
span{visibility:hidden; position:absolute; overflow:hidden;}
ul,li{ list-style:none; margin:0; padding:0;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible;margin-left:-500px;}
#info img{ width:400px; height:280px; border:7px solid #FFFFFF}
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}
span.first{position:absolute; top:90px;  z-index:19px; visibility: visible;margin-left:-500px;}
.b1{ background:url(http://www.zishu.cn/images/b1.jpg)}
.b2{ background:url(http://www.zishu.cn/images/b2.jpg)}
.b3{ background:url(http://www.zishu.cn/images/b3.jpg)}
.b4{ background:url(http://www.zishu.cn/images/b4.jpg)}
.b5{ background:url(http://www.zishu.cn/images/b5.jpg)}
.b6{ background:url(http://www.zishu.cn/images/b6.jpg)}
</style>
</head>
<body>
<div id="info">
  <h3>子鼠的CSS相册</h3>
  <div id="zs">
    <ul>
      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span class="first"><img src="http://www.zishu.cn/images/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="http://www.zishu.cn/images/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b3 z" target="_blank" title="照片3"><span><img src="http://www.zishu.cn/images/a3.jpg" alt="照片3" /><br />
        这是照片3<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b4 z" target="_blank" title="照片4"><span><img src="http://www.zishu.cn/images/a4.jpg" alt="照片4" /><br />
        这是照片4<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b5 z" target="_blank" title="照片5"><span><img src="http://www.zishu.cn/images/a5.jpg" alt="照片5" /><br />
        这是照片5<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b6 z" target="_blank" title="照片6"><span><img src="http://www.zishu.cn/images/a6.jpg" alt="照片6" /><br />
        这是照片6<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="http://www.zishu.cn/images/a1.jpg" alt="照片1" /><br />
        这是照片1<br />
        www.zishu.cn</span></a></li>
      <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="http://www.zishu.cn/images/a2.jpg" alt="照片2" /><br />
        这是照片2<br />
        www.zishu.cn</span></a></li>
    </ul>
  </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

greengnn's space/web design
Design your life with Web Standards WEB标准群：46077068

TOP

HotHeart

徐徐

银牌会员

帖子: 1231
体力: 2532
威望: 24

专长 JS,ASP,.NET

6^# 大中小发表于 2006-7-10 06:20

greengnn的代码显示的时候下面提示的字会有重叠，照片1的提示文本还在那里

Simple,Natural,Actual
HotHear's BLOG

TOP

snwebsite

蓝色怪兽

版主

帖子: 4340
体力: 7370
威望: 68

7^# 大中小发表于 2006-7-10 07:37

CSSPLAY 有很多这样的效果呀，不过我觉得都不实用，实际还是用FLASH方便

LOST

TOP

yangliangy

雨是云的梦

银牌会员

帖子: 1488
体力: 1074
威望: 0
当前: 广东深圳
离线: 2 天

8^# 大中小发表于 2006-7-10 08:38

不错!!

地理...

TOP

gd17

初级会员

帖子: 89
体力: 89
威望: 0
离线: 766 天

9^# 大中小发表于 2006-7-10 09:35

没想到，呵呵，

CS沙漠之鹰

TOP

jdjia [楼主]

秀才

金牌会员

帖子: 3798
体力: 4425
威望: 63
当前: 上海徐汇
离线: 1 天

专长 Flash,前端制作,PHP

10^# 大中小发表于 2006-7-17 21:47

greengnn的重叠问题不算是什么问题。谢谢他的修改！

snwebsite 这是一个FLASH作的效果：http://www.zishu.cn/blogview.asp?logID=120

（子鼠）我的BLOG：www.zishu.cn www.d1ll.com

TOP

weiqg

新手上路

帖子: 3
体力: 4
威望: 0
离线: 382 天

11^# 大中小发表于 2006-7-18 13:02

真不错

人潮人海中

TOP

zzm270782357

新手上路

帖子: 1
体力: 2
威望: 0
离线: 136 天

12^# 大中小发表于 2006-7-18 15:32

是不错啊

TOP

有个fire人

阿fire

银牌会员

帖子: 808
体力: 1294
威望: 2
当前: 江西南昌
离线: 1 天

13^# 大中小发表于 2006-7-18 21:42

在<body>中加个onload是不是更快点？

<body onload="http://www.zishu.cn/images/b1.jpg;

">

人生如烟，没事就烧

TOP

Evance

剑侠狗

金牌会员

帖子: 5456
体力: 3344
威望: 0
当前: 浙江杭州

14^# 大中小发表于 2006-7-18 22:43

楼上的是什么意思？？

心情差！！！

TOP

jdjia [楼主]

秀才

金牌会员

帖子: 3798
体力: 4425
威望: 63
当前: 上海徐汇
离线: 1 天

专长 Flash,前端制作,PHP

15^# 大中小发表于 2006-7-19 12:06

引用:

原帖由 有个fire人 于 2006-7-18 21:42 发表
在<body>中加个onload是不是更快点？

<body onload="http://www.zishu.cn/images/b1.jpg;">

这个我感觉没有必要！

因为加载到class="b1 z" 的时候，就开始加载图片了！

（子鼠）我的BLOG：www.zishu.cn www.d1ll.com

TOP

shayixin

高级会员

帖子: 280
体力: 864
威望: 0
离线: 67 天

16^# 大中小发表于 2006-7-19 14:23

问楼主一下为什么z-index的值一个是20px ,一个是19px ,为什么要加上px?不是说z-index是没有单位的吗？我去掉以后就没有效果了，请问为什么？

www.chinadaily.com.cn
大隐隐于朝，中隐隐于市，小隐隐于野！

TOP

jdjia [楼主]

秀才

金牌会员

帖子: 3798
体力: 4425
威望: 63
当前: 上海徐汇
离线: 1 天

专长 Flash,前端制作,PHP

17^# 大中小发表于 2006-7-19 15:14

引用:

原帖由 shayixin 于 2006-7-19 14:23 发表
问楼主一下为什么z-index的值一个是20px ,一个是19px ,为什么要加上px?不是说z-index是没有单位的吗？我去掉以后就没有效果了，请问为什么？

是不应该有单位，是我写时写错了。更改后不可能没有效果。你改成z-index:2;也同样会有效果的！

感谢你指出错误！

（子鼠）我的BLOG：www.zishu.cn www.d1ll.com

TOP

fanjinguo

初级会员

帖子: 38
体力: 99
威望: 0
离线: 439 天

18^# 大中小发表于 2006-7-20 11:56

放羊......路过

公益广告;保护环境珍惜水资源

TOP

MywayLau

爵士乐

高级会员

帖子: 1479
体力: 683
威望: 2
当前: 吉林四平
离线: 3 天

19^# 大中小发表于 2006-7-21 08:24

opera下狂闪

TOP

tshjds

游子归来

中级会员

帖子: 209
体力: 249
威望: 4
当前: 北京朝阳区

20^# 大中小发表于 2006-7-21 10:00

不错呀!!又学到一套啦

TOP

BLueID

我想做个好人

初级会员

帖子: 95
体力: 54
威望: 0
离线: 109 天

21^# 大中小发表于 2006-7-21 10:53

先收藏了~回头再跟秀才请教！

TOP