请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服 蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 做了一个相册的效果！
返回列表 发新帖
查看: 8606|回复: 20

做了一个相册的效果！ [复制链接]

jdjia　楼主

秀才

钻石会员 手机认证 

帖子
4355
体力
8588
威望
108
发表于 2006-7-9 00:59:00 |显示全部楼层
以下就是效果。



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



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

  1. <style>
  2. body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
  3. #info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
  4. h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
  5. span{visibility:hidden; position:absolute; overflow:hidden;}
  6. ul,li{ list-style:none; margin:0; padding:0;}
  7. a:active,a:hover{ cursor:pointer}
  8. a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible; margin-left:-500px;}
  9. #info img{ width:400px; height:280px; border:7px solid #FFFFFF}
  10. #zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
  11. .z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}
  12. .b1{ background:url(images/b1.jpg)}
  13. .b2{ background:url(images/b2.jpg)}
  14. .b3{ background:url(images/b3.jpg)}
  15. .b4{ background:url(images/b4.jpg)}
  16. .b5{ background:url(images/b5.jpg)}
  17. .b6{ background:url(images/b6.jpg)}
  18. </style>
复制代码

  1. <div id="info">
  2.   <h3>子鼠的CSS相册</h3>
  3.   <div id="zs">
  4.     <ul>
  5.       <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="images/a1.jpg" alt="照片1" /><br />
  6.         这是照片1<br />
  7.         www.zishu.cn</span></a></li>
  8.       <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="images/a2.jpg" alt="照片2" /><br />
  9.         这是照片2<br />
  10.         www.zishu.cn</span></a></li>
  11.       <li><a href="http://www.zishu.cn" class="b3 z" target="_blank" title="照片3"><span><img src="images/a3.jpg" alt="照片3" /><br />
  12.         这是照片3<br />
  13.         www.zishu.cn</span></a></li>
  14.       <li><a href="http://www.zishu.cn" class="b4 z" target="_blank" title="照片4"><span><img src="images/a4.jpg" alt="照片4" /><br />
  15.         这是照片4<br />
  16.         www.zishu.cn</span></a></li>
  17.       <li><a href="http://www.zishu.cn" class="b5 z" target="_blank" title="照片5"><span><img src="images/a5.jpg" alt="照片5" /><br />
  18.         这是照片5<br />
  19.         www.zishu.cn</span></a></li>
  20.       <li><a href="http://www.zishu.cn" class="b6 z" target="_blank" title="照片6"><span><img src="images/a6.jpg" alt="照片6" /><br />
  21.         这是照片6<br />
  22.         www.zishu.cn</span></a></li>
  23.       <li><a href="http://www.zishu.cn" class="b1 z" target="_blank" title="照片1"><span><img src="images/a1.jpg" alt="照片1" /><br />
  24.         这是照片1<br />
  25.         www.zishu.cn</span></a></li>
  26.       <li><a href="http://www.zishu.cn" class="b2 z" target="_blank" title="照片2"><span><img src="images/a2.jpg" alt="照片2" /><br />
  27.         这是照片2<br />
  28.         www.zishu.cn</span></a></li>
  29.     </ul>
  30.   </div>
  31. </div>
复制代码


原贴地址为：http://www.zishu.cn/blogview.asp?logID=459
已有 1 人评分威望 收起 理由
经典论坛大妈 + 3 历史打分

总评分: 威望 + 3   查看全部评分

博客:http://zishu.cn 微薄:http://weibo.com/bigbo
西部数码顶级域名注册商39元抢注！

使用道具 举报

12001200　
帖子
10
体力
5
威望
0
发表于 2006-7-9 09:56:00 |显示全部楼层
好好呀
租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

12001200　
帖子
10
体力
5
威望
0
发表于 2006-7-9 09:59:00 |显示全部楼层
好好呀

使用道具 举报

youmentang　
帖子
186
体力
373
威望
0
发表于 2006-7-9 11:01:00 |显示全部楼层
效果不错，用纯css就能达到这个效果真是不错。向你学习。

使用道具 举报

greengnn　

酒酣几度

荣誉管理 手机认证 

帖子
1367
体力
3521
威望
127
发表于 2006-7-10 01:09:00 |显示全部楼层
很棒，我也来体验一下，相册就应该有个初始的图片！而且visibility: visible; 虽然不可见了，但是所占据的物理位置还是存在。可是我用display替代了它，反向滑动鼠标就失效了，也懒得测试了，就先这样！

PS：图片很PP

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

blog Web标准化交流会 WEB标准群：23783439

使用道具 举报

HotHeart　

徐徐

银牌会员

帖子
1231
体力
5102
威望
24
发表于 2006-7-10 06:20:00 |显示全部楼层
greengnn的代码显示的时候下面提示的字会有重叠，照片1的提示文本还在那里
Simple,Natural,Actual
HotHear's BLOG

使用道具 举报

snwebsite　

蓝色怪兽

荣誉管理

帖子
4347
体力
14380
威望
69
居住地
香港特别行政区 湾仔区
发表于 2006-7-10 07:37:00 |显示全部楼层
CSSPLAY 有很多这样的效果呀，不过我觉得都不实用，实际还是用FLASH方便

使用道具 举报

yangliangy　

雨是云的梦

银牌会员 手机认证 

帖子
1665
体力
2204
威望
0
居住地
广东省 深圳市
发表于 2006-7-10 08:38:00 |显示全部楼层
不错!!
保温包/冰包/布衣柜 省内可货到付款

使用道具 举报

gd17　
帖子
89
体力
94
威望
0
发表于 2006-7-10 09:35:00 |显示全部楼层
没想到，呵呵，
CS沙漠之鹰

使用道具 举报

jdjia　楼主

秀才

钻石会员 手机认证 

帖子
4355
体力
8588
威望
108
发表于 2006-7-17 21:47:21 |显示全部楼层
greengnn的重叠问题不算是什么问题。谢谢他的修改！

snwebsite 这是一个FLASH作的效果：http://www.zishu.cn/blogview.asp?logID=120
博客:http://zishu.cn 微薄:http://weibo.com/bigbo

使用道具 举报

weiqg　
帖子
3
体力
9
威望
0
发表于 2006-7-18 13:02:34 |显示全部楼层

真不错

人潮人海中

使用道具 举报

zzm270782357　
帖子
1
体力
7
威望
0
发表于 2006-7-18 15:32:49 |显示全部楼层
是不错啊

使用道具 举报

有个fire人　

阿fire

银牌会员

帖子
833
体力
2315
威望
2
居住地
江西省 南昌市
发表于 2006-7-18 21:42:28 |显示全部楼层
在<body>中加个onload是不是更快点？

<body onload="http://www.zishu.cn/images/b1.jpg;">
人生如烟，没事就烧

使用道具 举报

Evance　

剑侠狗

钻石会员

帖子
11580
体力
7079
威望
1
居住地
浙江省 杭州市
发表于 2006-7-18 22:43:15 |显示全部楼层
楼上的是什么意思？？
带着智商说话
布拉格

使用道具 举报

jdjia　楼主

秀才

钻石会员 手机认证 

帖子
4355
体力
8588
威望
108
发表于 2006-7-19 12:06:30 |显示全部楼层
原帖由 有个fire人 于 2006-7-18 21:42 发表
在<body>中加个onload是不是更快点？

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

  这个我感觉没有必要！

因为加载到class="b1 z" 的时候，就开始加载图片了！
博客:http://zishu.cn 微薄:http://weibo.com/bigbo

使用道具 举报

shayixin　
帖子
337
体力
1949
威望
0
发表于 2006-7-19 14:23:49 |显示全部楼层
问楼主一下为什么z-index的值一个是20px ,一个是19px ,为什么要加上px?不是说z-index是没有单位的吗？ 我去掉以后就没有效果了，请问为什么？

使用道具 举报

jdjia　楼主

秀才

钻石会员 手机认证 

帖子
4355
体力
8588
威望
108
发表于 2006-7-19 15:14:16 |显示全部楼层
原帖由 shayixin 于 2006-7-19 14:23 发表
问楼主一下为什么z-index的值一个是20px ,一个是19px ,为什么要加上px?不是说z-index是没有单位的吗？ 我去掉以后就没有效果了，请问为什么？

是不应该有单位，是我写时写错了。 更改后不可能没有效果。你改成z-index:2;也同样会有效果的！ 感谢你指出错误！
博客:http://zishu.cn 微薄:http://weibo.com/bigbo

使用道具 举报

fanjinguo　
帖子
40
体力
149
威望
0
发表于 2006-7-20 11:56:47 |显示全部楼层
放羊......路过
www.yileyeya.com

使用道具 举报

MywayLau　

爵士乐

银牌会员

帖子
7325
体力
1270
威望
2
居住地
吉林省 四平市
发表于 2006-7-21 08:24:18 |显示全部楼层
opera下狂闪

使用道具 举报

tshjds　

游子归来

中级会员 手机认证 

帖子
213
体力
687
威望
4
发表于 2006-7-21 10:00:24 |显示全部楼层
不错呀!!又学到一套啦

使用道具 举报

BLueID　

我想做个好人

初级会员

帖子
108
体力
111
威望
0
发表于 2006-7-21 10:53:23 |显示全部楼层
先收藏了~回头再跟秀才请教！

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 13:04 , Processed in 0.161693 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部