[原]模仿Google首页的PNG动画效果
代码写的比较乱，请大家多多包涵。如果对代码有什么建议的，请说下，一起进步。
主要是使用backgroundPosition实现.
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD><TITLE>动态 PNG [google.cn]首页的效果</> </TITLE>
<META http-equiv=content-type content="text/html; charset=gb2312">
<style>
.min1, .min2, .min3, .min4, .min5
{
cursor:pointer ;
width:68.2px;
height:53.3px;
background-image:url("toolbar1.png");
background-repeat: no-repeat;
}
</style>
<script>var speed=50,_width=68.2,_height=53.3;function DivObj(x,y){ var obj = new Object(); obj.x = 0; obj.y = 0; obj.interval=0; obj.order=''; return obj;}var va1 = new DivObj();var va2 = new DivObj();var va3 = new DivObj();var va4 = new DivObj();var va5 = new DivObj();function G(id){return document.getElementById(id);}function show(obj){var order = getValue(obj, 'order');var temp = -_width;var y = getY(obj);var operator = ">", compare = temp*4;var x=getValue(obj,'x'), y=getValue(obj,'y');if(order == "l"){operator = "<"; compare=0; temp=-temp;}eval("if(x"+operator+compare+")setValue(obj,'x',x+temp)");if(x == compare){setValue(obj, 'x', compare);set(obj, x, y);clearInterval(getValue(obj,'interval'));return;}if(order == 'l' && x>0){x=0;y=(getOrder(obj)-1) * -_height;setValue(obj, 'x', x);setValue(obj, 'y', y);set(obj, x, y);clearInterval(getValue(obj,'interval'));return;}set(obj, x, y);}function set(obj,x,y){obj.style.backgroundPosition= x + "px "+ y + "px";}function getValue(obj, type){return eval("va" + getOrder(obj) + "." + type);}function setValue(obj, type, value){eval("va"+getOrder(obj)+"."+type+"="+value);}function start(obj){setValue(obj, 'order', "'r'");clearInterval(getValue(obj,'interval'));setValue(obj, 'interval', "window.setInterval(function(){show(obj);}, speed)");}function getOrder(obj){return obj.id.substring(3,4);}function getY(obj){return (parseInt(obj.id.substring(3,4)) - 1) * -_height;}function end(obj){setValue(obj, 'order', "'l'");clearInterval(getValue(obj,'interval'));setValue(obj, 'interval', "window.setInterval(function(){show(obj);}, speed)");}function init(){for(var i=1; i<=3; i++){eval("set(G('div'+"+i+"),0,"+(i-1)*-_height+")");setValue(G('div'+i), 'x', '0');setValue(G('div'+i), 'y', (i-1)*-_height);setValue(G('div'+i), 'interval', '0');setValue(G('div'+i), 'order', '0');}}
document.execCommand("BackgroundImageCache",false,true);
</script>
</HEAD>
<BODY onload=init()>
<div id="div1" class="min1" width="16px" height="200px" onclick="window.location='http://www.baidu.com'" onmouseout="end(this)" onmouseover="start(this)"></div>
<div id="div2" class="min2" width="16px" height="200px" onclick="window.location='http://www.baidu.com'" onmouseout="end(this)" onmouseover="start(this)"></div>
<div id="div3" class="min3" width="16px" height="200px" onclick="window.location='http://www.baidu.com'" onmouseout="end(this)" onmouseover="start(this)"></div>
<DIV id=tb></DIV>
</BODY></html>
下载地址：
https://files.cnblogs.com/xjyggd/pngMoveTest.rar
主要是使用backgroundPosition实现.
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD><TITLE>动态 PNG [google.cn]首页的效果</> </TITLE>
<META http-equiv=content-type content="text/html; charset=gb2312">
<style>
.min1, .min2, .min3, .min4, .min5
{
cursor:pointer ;
width:68.2px;
height:53.3px;
background-image:url("toolbar1.png");
background-repeat: no-repeat;
}
</style>
<script>var speed=50,_width=68.2,_height=53.3;function DivObj(x,y){ var obj = new Object(); obj.x = 0; obj.y = 0; obj.interval=0; obj.order=''; return obj;}var va1 = new DivObj();var va2 = new DivObj();var va3 = new DivObj();var va4 = new DivObj();var va5 = new DivObj();function G(id){return document.getElementById(id);}function show(obj){var order = getValue(obj, 'order');var temp = -_width;var y = getY(obj);var operator = ">", compare = temp*4;var x=getValue(obj,'x'), y=getValue(obj,'y');if(order == "l"){operator = "<"; compare=0; temp=-temp;}eval("if(x"+operator+compare+")setValue(obj,'x',x+temp)");if(x == compare){setValue(obj, 'x', compare);set(obj, x, y);clearInterval(getValue(obj,'interval'));return;}if(order == 'l' && x>0){x=0;y=(getOrder(obj)-1) * -_height;setValue(obj, 'x', x);setValue(obj, 'y', y);set(obj, x, y);clearInterval(getValue(obj,'interval'));return;}set(obj, x, y);}function set(obj,x,y){obj.style.backgroundPosition= x + "px "+ y + "px";}function getValue(obj, type){return eval("va" + getOrder(obj) + "." + type);}function setValue(obj, type, value){eval("va"+getOrder(obj)+"."+type+"="+value);}function start(obj){setValue(obj, 'order', "'r'");clearInterval(getValue(obj,'interval'));setValue(obj, 'interval', "window.setInterval(function(){show(obj);}, speed)");}function getOrder(obj){return obj.id.substring(3,4);}function getY(obj){return (parseInt(obj.id.substring(3,4)) - 1) * -_height;}function end(obj){setValue(obj, 'order', "'l'");clearInterval(getValue(obj,'interval'));setValue(obj, 'interval', "window.setInterval(function(){show(obj);}, speed)");}function init(){for(var i=1; i<=3; i++){eval("set(G('div'+"+i+"),0,"+(i-1)*-_height+")");setValue(G('div'+i), 'x', '0');setValue(G('div'+i), 'y', (i-1)*-_height);setValue(G('div'+i), 'interval', '0');setValue(G('div'+i), 'order', '0');}}
document.execCommand("BackgroundImageCache",false,true);
</script>
</HEAD>
<BODY onload=init()>
<div id="div1" class="min1" width="16px" height="200px" onclick="window.location='http://www.baidu.com'" onmouseout="end(this)" onmouseover="start(this)"></div>
<div id="div2" class="min2" width="16px" height="200px" onclick="window.location='http://www.baidu.com'" onmouseout="end(this)" onmouseover="start(this)"></div>
<div id="div3" class="min3" width="16px" height="200px" onclick="window.location='http://www.baidu.com'" onmouseout="end(this)" onmouseover="start(this)"></div>
<DIV id=tb></DIV>
</BODY></html>
下载地址：
https://files.cnblogs.com/xjyggd/pngMoveTest.rar
