用css3的transition，很容易实现hover时旋转效果的：
<style>img{width:50pxheight:50pxdisplay:block-webkit-transition:0.4s lineartransition:0.4s ease-in}
img:hover{-webkit-transform:rotate(360deg)transform:rotate(360deg)}
</style>
<div>
<img src="http://www.baidu.com/img/bdlogo.gif">
css让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失，可以尝试一下代码.xwcms {
margin: 0 auto
-webkit-border-radius: 110px
border-radius: 110px
-webkit-transition: -webkit-transform 0.2s ease-out
-moz-transition: -moz-transform 0.2s ease-out
-o-transition: -o-transform 0.2s ease-out
-ms-transition: -ms-transform 0.2s ease-out
}
.xwcms:hover {
-webkit-transform: rotateZ(180deg)
-moz-transform: rotateZ(180deg)
-o-transform: rotateZ(180deg)
-ms-transform: rotateZ(180deg)
transform: rotateZ(180deg)
}
<img src="img/jiaotou.png" class="xwcms" />
使用jquery的toggle方法进行图片切换：
$(function(){
$("#h1").toggle(function(){
$("#h1").css("background-image","路径('./20110528073501b54e6.jpg')")
},function(){
$("#h1").css("background-image","路径('./2011060708410874041.jpg')")
})
})
<input type="button" value="huan" id="h1" class="hh1" />
CSS
.hh1{
background: url("./2011060708410874041.jpg")
width: 120px
height: 90px
}
