在网页中我们经常可以看到，有些图片在鼠标经过的时候，有一个上下或左右的滑动效果，很实用页很方便，今天正好用到，拿来和大家分享一下，有什么不对或意见欢迎指正。
html部分如下，这里本来打算用jq来着，后来没有用到。。
话不多说直接上代码。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css雪碧（CSS Sprite）和css3过渡效果综合应用</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--<script src="../../jQuery v1.4.2/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/style.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="sideBar">
<ul class="sideBar_u">
<li><a class="sideBar_g gbm1" href="javascript:;"></a></li>
<li><a class="sideBar_g gbm2" href="javascript:;"></a></li>
<li><a class="sideBar_g gbm3" href="javascript:;"></a></li>
<li><a class="sideBar_g gbm4" href="javascript:;"></a></li>
</ul>
</div>
</body>
</html>
css部分
li,ul{margin:0;padding:0}
li{list-style-type:none}
a{text-decoration:none}
body{background:#183741}
.sideBar{float:left;margin:0;padding:0}
.sideBar_u{float:left;background:#112F35}
.sideBar ul li{height:63px;width:276px;margin:0 0 5px 0}
.sideBar ul li a{height:62px;width:276px;display:block}
.sideBar_g{background:url(../img/linkBtn.png);-webkit-transition-property:background-position;-webkit-transition-duration:.5s;-moz-transition-property:background-position;-moz-transition-duration:.5s;transition-property:background-position;transition-duration:.5s}
a.gbm1{background-position:0 -224px}
a.gbm1:hover{background-position:0 -288px}
a.gbm2{background-position:-276px -224px}
a.gbm2:hover{background-position:-276px -288px}
a.gbm3{background-position:-552px -224px}
a.gbm3:hover{background-position:-552px -288px}
a.gbm4{background-position:-828px -224px}
a.gbm4:hover{background-position:-828px -288px}
配合上你想要展示的图片，和背景定位，一个实用美观的效果就写好了。
附上链接 http://xf.wolade.com/demo2/demo2/