有时间要研究一下Google的新技术

 

http://realazy.org/blog/2007/10/08/css-sprites

http://www.marchbox.com/blog/css-sprite-in-google-search/

http://www.blueidea.com/tech/site/2007/4750.asp

http://hi.baidu.com/vivaid/blog/item/d9feb064842b43f3f736541e.html

 

目标：输入网站地址，把这个网站的所有背景图片生成一张整图，并生成文件与坐标的对照表

http://spritegen.website-performance.org/

 

JS部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>google.cn 的一个效果</title>

<style>

/*http://www.zishu.cn*/

*{ padding:0; margin:0; list-style:none; font-size:12px;}

#nav{margin:50px;}

#nav li{padding:15px 0}

#nav li a{display:block;cursor:pointer;cursor:hand;}

#nav li a span{ margin:-15px 0 0 -40px;position:absolute; background:url(http://www.zishu.cn/attachments/month_0711/n20071113221019.png) no-repeat; display:block;height:33px; width:40px;}

</style>

</head>

<body>

<div id="nav">

<ul>

<li id="info_1"><a onmouseover="onBg(1,1)" onmouseout="onBg(1,0)" href="http://www.zishu.cn/"><span id="span_1"></span>谷歌拼音输入法</a></li>

<li id="info_2"><a onmouseover="onBg(2,1)" onmouseout="onBg(2,0)" href="http://www.zishu.cn/"><span id="span_2"></span>谷歌工具条</a></li>

<li id="info_3"><a onmouseover="onBg(3,1)" onmouseout="onBg(3,0)" href="http://www.zishu.cn/"><span id="span_3"></span>手机位置</a></li>

<li id="info_4"><a onmouseover="onBg(4,1)" onmouseout="onBg(4,0)" href="http://www.zishu.cn/"><span id="span_4"></span>在线翻译</a></li>

<li id="info_5"><a onmouseover="onBg(5,1)" onmouseout="onBg(5,0)" href="http://www.zishu.cn/"><span id="span_5"></span>列车时刻</a></li>

<li id="info_6"><a onmouseover="onBg(6,1)" onmouseout="onBg(6,0)" href="http://www.zishu.cn/"><span id="span_6"></span>网速测试</a></li>

<li id="info_7"><a onmouseover="onBg(7,1)" onmouseout="onBg(7,0)" href="http://www.zishu.cn/"><span id="span_7"></span>万年历</a></li>

<li id="info_8"><a onmouseover="onBg(8,1)" onmouseout="onBg(8,0)" href="http://www.zishu.cn/"><span id="span_8"></span>这个不知道</a></li>

</ul>

</div>

<script language="JavaScript">

var info = document.getElementById('nav');

function navScrollBg(e,num,flag) {

var a=[0,40,80,120,160,200,240];

var spans = document.getElementById('span_'+num);

if(flag == 1){

spans.style.backgroundPosition = (0 - a[e]) + 'px' + ' ' + (0-((num-1)*33)) +'px';

}else{

a.sort(function(b,c){return c-b;});

spans.style.backgroundPosition = (0 - a[e]) + 'px' + ' ' + (0-((num-1)*33)) +'px';

}

 

}

function onBg(num,flag){

for(var e=0; e<7; e++){

setTimeout("navScrollBg(" + e + "," + num +","+flag+")",40 * e);

}

}

</script>

</body>

</html>

 

http://www.zishu.cn/blogview.asp?logID=669