您的位置：首页 > 编程语言 > Go语言

[原]模仿Google首页的PNG动画效果

2008-06-11 09:01 621 查看

代码写的比较乱，请大家多多包涵。如果对代码有什么建议的，请说下，一起进步。

主要是使用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>

下载地址：
http://files.cnblogs.com/xjyggd/pngMoveTest.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航