纯CSS实现相册滑动浏览_1

　2008/10/9 20:11:54　阅读 310 次

非续读浏览 | 发布资讯 | 评论 | 置顶 | 打印

英文原文：Sliding Photograph Galleries
翻译整理：西米CC-www.ximicc.com

效果：

运行代码框
<!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=gb2312" /> <title>别开生面纯CSS实现相册预览 webyi.com</title> <style type="text/css"> body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } #gallery { width:495px; height:240px; border: 1px solid #888; margin:0 auto; padding:0; list-style:none; background:#fff url(/upimg/allimg/080626/6283/win_backh.gif); } #gallery li { float: left; } #gallery li a { display: block; width: 28px; height: 240px; border-right: #fff 1px solid; overflow: hidden; cursor: default; } #gallery li a img { border:0; } #gallery li a:hover { width: 320px; } #gallery2 { margin:0 auto; padding:0; list-style-type:none; overflow:hidden; width:572px; height:238px; border:1px solid #000; background:#fff url(/upimg/allimg/080626/6283/win_back.gif); } #gallery2 li { float:left; } #gallery2 li a { display:block; height:30px; width:572px; float:left; overflow: hidden; text-decoration:none; border-bottom:1px solid #000; cursor:default; } #gallery2 li a img { border:0; } #gallery2 li a:hover { background:#eee; height:144px; } #gallery2 li a:hover img { height:144px; } --> </style> </head> <body> <ul id="gallery2"> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/1.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/2.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/3.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/4.jpg" alt="ximicc" title="ximicc" /></a></li> </ul> <div align="center"> <p><br /> <strong>原文地址：<a href="http://www.cssplay.co.uk/menu/gallery3l" target="_blank">Sliding Photograph Galleries</a></strong> <br /> <br /><strong>翻译整理：<a href="http://ximicc.com" target="_blank">西米CC www.ximicc.com</a></strong> <br /> <br /> </p><br /> </div> <ul id="gallery"> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b1.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b2.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b3.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b4.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b5.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b6.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b7.jpg" /></a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 3 页 [1] [2] [3]

相关阅读：

• 模拟跳舞游戏 (2008/12/26 19:59:44)
• 一款FLASH图片切换效果 (2008/12/26 19:59:41)
• 实现网页中图片的半透明效果 (2008/12/26 19:59:40)
• 焦点图片轮换第三季——iFocus (2008/11/26 7:57:56)
• 超酷MSN女性频道缓动图片特效 (2008/10/18 10:45:40)
• 10个能用JavaScript实现的图片特效 (2008/10/9 20:12:04)
• 纯CSS实现相册滑动浏览 (2008/10/9 20:11:54)
• 网页柱状图，CSS实现的网页特效代码 (2008/9/8 21:15:59)
• 强制网页图片自适应大小的网页特效代码 (2008/7/10 13:11:56)
• 刷新一次显示不同图片的特效代码 (2008/7/10 13:11:55)
• 文字和图片同时变换的网页特效 (2008/7/10 13:11:54)
• 网页特定区域连续滚动的图片特效 (2008/7/10 13:11:54)
• 特效代码:弹出一个淡入淡出的提示框 (2008/7/10 13:11:53)
• 淡入淡出效果的图片提示特效代码 (2008/7/10 13:11:53)
• 符合网站标准的图片切换特效(天极软件) (2008/7/10 13:11:52)
• 网站常用的一种JS的图片幻灯片特效代码 (2008/7/10 13:11:51)
• 不间断连续向上滚动的图片特效 (2008/7/10 13:11:48)
• 网页上部图片规定时间消失的特效 (2008/7/10 13:11:48)
• 网页左右浮动广告特效代码 (2008/7/10 13:11:48)

温馨提示

特别声明

最新热点资讯排行: • 互联网正式获得诺贝尔和平奖提名
• 2010年云计算的抉择：选择公共云还是私有云
• 个人电脑创始人获年度图灵奖
• 福布斯全球十大科技富豪盖茨仍居第一
• 索尼正式发布体感手柄Move(图)
• 过去十年中值得关注的十大技术事件
• 谷歌列出10大对手微软居首苹果未上榜
• Intel断言:绝大多数不需要高性能显卡
• Intel：Windows8时代USB3.0才成主流
• IntelGulftown六核心i7-980X实物曝光
• 谷歌推出AppsMarketplace应用商店
• IE浏览器刚发补丁又曝漏洞
• 微软IE浏览器再曝漏洞影响或超IE极光漏洞
• 索尼发布首款Facebook社交游戏《PoxNora》
• 谷歌CEO施密特：移动计算将重塑互联网
• 中国物联网抢攻国际标准工信部欲夺国际话语权

图片资讯

铁齿铜牙芝奇4GB/1600内存套装到货	主板也会省钱梅捷P43+节能版新鲜亮相
神秘受邀T版HTCHD2或于本月24日开卖	性价比出色思科企业级交换机仅5200元
全面普及LEDHKC推出超平价液晶(多图)	AMD联手华硕打造非公5970不惧GTX480
速度惊人OCZ首款USB3.0固态SSD问世	Intel八核Nehalem-EX处理器本月发布

: • 平民机型不平凡移动定制LGTB200图赏
• DDR3内存性价比较高2GB均价330元_4
• 触摸屏DC新贵佳能IXUS210IS精美图赏
• 霸主HD2速降中诺基亚N97mini价格直降
• 价格是关键西数首款消费级SSD测试
• 三星NX10领航三星2010年春季新品发布会
• C网Jet捷S8000C电信定制三星F809评测
• 装机巧避误区10年如何选机电更合理?_6
• 尽显高科技风范索尼发布10款家用摄像机
• 谷歌Chrome操作系统简单超凡