用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实现图片滑动效果

相关文章：

精彩推荐

热门文章