var num=0,y=0
function time() {
num+=80
if(num>400){
num=0
}
$("#fav-icon").css("background-position",num+'px '+y+"px")
}
$(".fav").hover(function(){
inte= setInterval(time, 500)
},function(){
clearInterval(inte)
$("#fav-icon").css("background-position",0+'px '+0+"px")
})
})
var list = document.getElementsByTagName('li')for(var i = 0 i < list.length i++) {
list[i].style.backgroundImage = i+'.jpg'
}
以上是你做12张图片的情况。
还有一种是把12张图片整合到一张图片上，前提是这12张图片高度最好一致
样式就用
li{background:url(sprites.jpg) no-repeat height:固定好高度}代码用
list[i].style.backgroundPosition = '0 ' + (间隔高度) * i + 'px'原理：文字下面放的只是张红色的背景图片，当鼠标移上去的时候会触发onmousemove事件，在触发该事件后，只需要将背景图片由原来的红色图片换成同等大小的黄图片即可，
当鼠标离开那个区域后，会触发onmouseout事件，此时再将背景那个黄图片换成以前的红色即可，这种效很多网站上都有，不过一般都是正的，你给的那个图上的只不过背景图片是个斜的而已
你进taobao首页就有，原理是一样的，只不过它背景是白色的，鼠标移上去后把背景色换了，他可能不是用的图片， 用的DIV实现 的，但是你给的这个图的背景肯定是图片了
