css实现图片滑动效果

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

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

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;
}