WEB开发网
开发学院网页设计JavaScript javascript+css一张背景图片的不同切换 阅读

javascript+css一张背景图片的不同切换

 2009-06-30 02:32:00 来源:WEB开发网   
核心提示:<div style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png)" index=0></

<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png)" index=0></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -35" index=1></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -70" index=2></div>
<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -107" index=3></div>
<script>
var timer=[null,null,null,null]
var g=[0,0,0,0]
var sty=[new Array(),new Array(),new Array(),new Array()] 
// http://www.cncms.com/ 记录图片位置的数组

function touch(obj,a1,a2){
var f=0
for(var i=0;i<5;i++)
{
sty[obj.index][i]="-"+f+"px"+" "+a2+"px";
f=f+a1
}             //循环得出图片的位置
change(obj)
}

function change(obj){
clearTimeout(timer[obj.index])       //=======
if(g[obj.index]==sty[obj.index].length-1)
{
obj.style.backgroundPosition=sty[obj.index][g[obj.index]];
timer[obj.index]=setTimeout(function(){change(obj)},100)
}
else
{
obj.style.backgroundPosition=sty[obj.index][g[obj.index]]
g[obj.index]++
timer[obj.index]=setTimeout(function(){change(obj)},100)
}
}

function restore(obj){
clearTimeout(timer[obj.index])     //================
if(g[obj.index]<1)
{clearTimeout(timer[obj.index]);
obj.style.backgroundPosition=sty[obj.index][0]
}
else
{
obj.style.backgroundPosition=sty[obj.index][g[obj.index]]
g[obj.index]--
timer[obj.index]=setTimeout(function(){restore(obj)},100)
}
}
</script>

Tags:javascript css 背景图片

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接