JS的动态背景图片

JavaScript04

JS的动态背景图片,第1张

$(function(){

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实现 的，但是你给的这个图的背景肯定是图片了