当前位置:
沸点梦工场
>
网页特效
>
CSS代码特效
> 浏览文章
用CSS实现图片滑动效果
59HOT收集整理
2008年06月29日 【字体:
大
中
小
】
<!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实现相册预览 ximicc.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(http://www.blueidea.com/articleimg/2008/06/5905/windows/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(http://www.blueidea.com/articleimg/2008/06/5905/windows/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://59hot.com"> <img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/1.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://59hot.com"> <img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/2.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://59hot.com"> <img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/3.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://59hot.com"> <img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/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://59hot.com" target="_blank">西米CC www.ximicc.com</a></strong> <br /> <br /> </p><br /> </div> <ul id="gallery"> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b1.jpg" /></a></li> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b2.jpg" /></a></li> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b3.jpg" /></a></li> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b4.jpg" /></a></li> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b5.jpg" /></a></li> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b6.jpg" /></a></li> <li><a href="http://59hot.com"><img src="http://www.blueidea.com/articleimg/2008/06/5905/windows/b7.jpg" /></a></li> </ul> </body> </html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
相关文章:
用CSS制作动感的滑动菜单
用CSS实现图片滑动效果
一个不错的滑动门特效
类似选项卡的导航切换效果
CSS制作的阴影链接文字特效代码
CSS 制作的三级菜单特效代码
CSS仿淘宝首页导航条按钮布局效果
文字写在边线上的效果用CSS实现的特效代码
精彩推荐
35个优秀的网站
花丛中的小蜜蜂
热门文章
网页制作常用技巧24条
网页制作常用代码40条
AJAX技术经验谈:技术原理及应用
Illustrator快速简单设计宠物杂志封面
Windows XP共享问题经典问答
不改变屏幕分辨率 调整XP系统图标间隔
合理配置系统资源 操作系统内存优化9法
利用Ps通道为美女照片抠图
css美化input file按钮的方法
用户体验另外一个角度的认识与看法