css实现图片滑动效果

       以后将发布web学习这一系列，目的有两个：1）做个记号，以后可以拿出来常看；2）自己动手写一写，加深印象。

       常看到网站上各种图片效果，样式之绚丽，格式之优美。其实仔细发掘一下，发现它们并不是那么神秘，都是代码一句一句码出来的。今天带来图片滑动系列，是用css做出来的，其实并不是单纯的css，其实还是拓展了mouseover和mouseout这两个方法。

CSS实现图片滑动效果

首先看一下效果

• 
• 
• 
• 
• 

 

这里主要是用到:hover这个方法，主要思路：一开始让图片只显示一小部分（在这个例子里，width:30px），当鼠标放上去的时候，就显示成原本的大小（width:460px）。这里面需要注意的一点，初期看到整张的这张图片其实是一个背景，它的宽度要比其他图片都要宽，等于整个容器的宽。

先看前台

<ul id="gallery">
<li><a href="#nogo"><img src="http://images.cnblogs.com/cnblogs_com/linertz/243074/r_1-1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://images.cnblogs.com/cnblogs_com/linertz/243074/r_1-2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://images.cnblogs.com/cnblogs_com/linertz/243074/r_1-3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://images.cnblogs.com/cnblogs_com/linertz/243074/r_1-4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://images.cnblogs.com/cnblogs_com/linertz/243074/r_1-5.jpg" alt="#5" title="#5" /></a></li>
</ul>

因为这是纯css的，所以关于图片的显示问题就在css进行控制了。

 

#gallery {
  padding:0; 
  margin:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:610px; 
  height:305px; 
  border:1px solid #888; 
  background:#fff url(http://images.cnblogs.com/cnblogs_com/linertz/243074/r_1-0.jpg);
  }
#gallery li {
  float:left;
  }
#gallery li a {
  display:block; 
  height:305px;
  width:30px; 
  float:left; 
  overflow:hidden; 
  text-decoration:none; 
  border-bottom:1px solid #fff; 
  cursor:default;
  }
#gallery li a img {
  /*width:30px; 
  height:305px; */
  border:0;
  }
#gallery li a:hover {
  /*background:#eee; */
  width:460px;
  }
#gallery li a:hover img {
  width:460px;
  }