javascript-------一张图片的不同背景

冷不防 2022-08-24 00:53 147阅读 0赞

<div  style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app\_uploads/wtcsy/20081108/143439085.p.png)" onmouseover="touch(this,52,0)" onMouseOut="restore(this)" 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" onmouseover="touch(this,52,-35)" onMouseOut="restore(this)" 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" onmouseover="touch(this,52,-70)" onMouseOut="restore(this)" 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" onmouseover="touch(this,52,-107)" onMouseOut="restore(this)" 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()\]  //记录图片位置的数组  
  
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>  
我写的 下面一个是别人写的

<div id="ms">  
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app\_uploads/wtcsy/20081108/143439085.p.png)"></div>  
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app\_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -35px"></div>  
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app\_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -70px"></div>  
<div  style=" width:50px; height:37px;background-image:url(http://album.hi.csdn.net/app\_uploads/wtcsy/20081108/143439085.p.png); background-position:0px -107px"></div>  
</div>  
<script>  
    window.onload =function()\{  
        var imgs = document.getElementById('ms').getElementsByTagName('div');  
        for(var i=0; i<imgs.length; i\++)\{  
            var g = imgs\[i\], pos = g.style.backgroundPosition.split('');  
            g.tim =null;  
            g.r =0;  
            g.t = pos\[1\]? parseInt(pos\[1\]) : 0;  
            g.tem =0;  
            g.onmouseover =function()\{  
                var oThis =this;  
                if(this.tim) clearInterval(this.tim);  
                this.tim = setInterval(function()\{  
                    touch(oThis);  
                \}, 50);  
            \}  
            g.onmouseout =function()\{  
                var oThis =this;  
                if(this.tim) clearInterval(this.tim);  
                this.tim = setInterval(function()\{  
                    restore2(oThis);  
                \},30);  
            \}  
        \}  
    \}  
  
    function touch(obj)\{  
        obj.r \+=52;  
        if(obj.r >=208)\{  
            clearInterval(obj.tim);  
            obj.r =208;  
            obj.style.backgroundPosition ='\-208px '\+ (obj.t \-2) \+'px';  
            obj.tim = setInterval(function()\{  
                touch2(obj);  
            \},30);  
            return;  
        \}  
        obj.style.backgroundPosition ='\-'\+ obj.r \+'px '\+ obj.t \+'px';  
    \}  
  
    function restore(obj)\{  
        obj.r \-=52;  
        if(obj.r <=0)\{  
            clearInterval(obj.tim);  
            obj.r  =0;  
            obj.tem =0;  
            obj.style.backgroundPosition ='0 '\+ obj.t \+'px';  
            return;  
        \}else\{  
            obj.style.backgroundPosition ='\-'\+ obj.r \+'px '\+ obj.t \+'px';  
        \}  
    \}  
  
    function touch2(obj)\{  
        obj.tem \+=1;  
        if(obj.tem >=5)\{  
            clearInterval(obj.tim);  
            obj.tem =5;  
        \}  
        obj.style.backgroundPosition ='\-208px '\+ (obj.t\+obj.tem\-2) \+'px';  
    \}  
  
    function restore2(obj)\{  
        obj.tem \-=1;  
        if(obj.tem <=0)\{  
            clearInterval(obj.tim);  
            obj.tem =0;  
            obj.style.backgroundPosition ='\-208px '\+ (obj.t\-2) \+'px';  
            obj.tim = setInterval(function()\{  
                    restore(obj);  
                \},50);  
            return;  
        \}  
        obj.style.backgroundPosition ='\-208px '\+ (obj.t\+obj.tem\-2) \+'px';  
    \}  
</script>