我是谁 « CSSASS

我是谁
作者：Neoxone 发表时间： 2010年12月31号，星期五阅读：7,618 次

下面的代码里隐藏着一个秘密。
这个秘密将会告诉你我是谁!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Who am I</title>
<style type="text/css">
body
{
font-family: '微软雅黑';
line-height: 2;
font-size: 18px;
color: #444;
}
b{font-weight:normal;}
</style>
</head>
<body>
<div id="avata" style="width:50%;word-wrap:break-word;cursor:pointer;" onclick="anim()">王某人，自号【步舞之鹤】，洋诨【ONEBOYS】，八六年生人，籍贯义乌，师出浙林，寄居杭州。混迹互联网、IT界二年余，以捣鼓前端为业。英俊潇洒不足，博学多才欠精。为人善良，外冷内热。性格优柔寡断，善思不善断，善听不善言，十足的低调焖烧型青年。喜体验互联网新事物，好学习崇拜达人牛爷。业余网球爱好者，浙大紫荆港网球场每周六午后，逢无事必到。个人blog：cssass.com。僻野茅庐，若劳大驾，不胜惶恐。</div>
<script type="text/javascript">/*<![CDATA[*/
var d='43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643FU(OU):U*$';
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0;
var e;
function i()
{
	var n=0, g=document.getElementById('avata'), l=g.innerHTML, s='';
	while (n<l.length)
	{
		var r=l.charAt(n);
		if (r==' ') {s+=r; n++}
		if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
		s+='<b>'+l.charAt(n++)+'</b>';
	}
	g.innerHTML=s;
	e=document.getElementById('avata').getElementsByTagName('b');
	for (n=0; n<e.length; n++)
	{
		xo[n]=e[n].offsetLeft;
		yo[n]=e[n].offsetTop;
		var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
		yd[n]=p%500;
		xd[n]=(p-yd[n])/500;
	}
	for (n=0; n<e.length; n++)
	{
		e[n].style.position='absolute';
		e[n].style.left=xo[n]+'px';
		e[n].style.top=yo[n]+'px';
	}
}
function ani()
{	t=parseInt(e.length/4)+2;
	for (var n=0; n<t; n++)
	{
		m=e.length-1-n;
		if ((an-n<=30)&&(an-n>=0))
		{
			var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
			var a=1-b;
			for (i=0; i<=t; i+=t)
			{
				e[n+i].style.left=((yd[n+i]+111)*a+xo[n+i]*b)+'px';
				e[n+i].style.top=((xd[n+i]+74)*a+yo[n+i]*b)+'px';
				e[m-i].style.left=((yd[m-i]+111)*a+xo[m-i]*b)+'px';
				e[m-i].style.top=((xd[m-i]+74)*a+yo[m-i]*b)+'px';
			}
		}
	}
	an+=dir;
	if ((an-t<=30)&&(an>=0))
	{
		window.setTimeout("ani()", 30);
	}
}
function anim()
{
	dir*=-1;
	if ((an<0)||(an-t>30)) ani();
}
i();
/*]]>*/
</script>
</body>
</html>

其实，以上DEMO，代码基本上都来自 Román Cortés,就是那个只用了1K字符写出3D圣诞树的家伙。

附：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<style>
textarea{width:600px;height:60px;font-size:12px;}
</style>
</head>
<body>
<p>源坐标：<textarea id='e'></textarea></p>
<p>存坐标：<textarea id='s'></textarea></p>
<p>解坐标：<textarea id='e2'></textarea></p>
</body>
<script type="text/javascript">
//最大存储坐标[499,254]
var e=[
[7,13],
[26,13],
[499,254]
];
var s='';
var e2=[];
//用字符串存储坐标
function untie(e){
	var i,p,a,b,c;
	var find=function(p){
		for(c=33;c<=126;c++){
			if (c==34 || c==39 || c==92) continue;  //排出' " \三个符号
			for(b=33;b<=126;b++){
				if (b==34 || b==39 || b==92) continue;
				for(a=33;a<=126;a++){
					if (a==34 || a==39 || a==92) continue;
					if(p==a*1600 + b*40 + c-78768)
					{return (String.fromCharCode(a)+String.fromCharCode(b)+String.fromCharCode(c));}
				}
			}
		}
	}
	for(i=0;i<e.length;i++){
		p=e[i][1]*500+e[i][0];
		s+=find(p);
	}
	document.getElementById('s').value=s;
}
//将存储的字符串转回坐标
function tie(s){
	var p,n;
	for(var i=0; i<s.length/3 ; i++){
		n=[];
		p=s.charCodeAt(i*3)*1600+s.charCodeAt(i*3+1)*40+s.charCodeAt(i*3+2)-78768;
		n[0]=p%500;
		n[1]=(p-n[0])/500;
		e2.push(n);
	}
	document.getElementById('e2').value=e2;
}
document.getElementById('e').value=e;
untie(e);
tie(s);
</script>
</html>

新年来临，这篇博文也就是我2010年的关门之作。
祝大家新的一年里新年新气象。

这篇文章发布于 2010年12月31号，星期五，18:14，归类于 Javascript。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

caii 说：

2011年01月9日于22:55

效果不错，请教，最初的坐标值是怎么得来的呢

ONEBOYS 回复:
一月 10th, 2011 at 08:32

在flash里摆好位置，一个个取出来的

长岛冰泪回复:
八月 15th, 2011 at 10:29

@ONEBOYS, 这么痛苦啊，不装flash呢

cindy 回复:
十二月 19th, 2013 at 14:14

@ONEBOYS, flash里摆好位置，不是很明白啊

NeoXone 回复:
十二月 19th, 2013 at 17:26

@cindy, 在flash舞台上用文字摆出一个形状，然后获取各个文字的坐标。

cindy 回复:
十二月 19th, 2013 at 17:31

@NeoXone, 嗯，谢谢，我试试

Zenggo 说：

2013年06月13日于23:19

博主您好，您的主页内容很有意思~~!我是一名初学者，很幸运逛到你的博客，让我这个小白感受到前端开发丰富的世界。很受启发~！

请教个问题，要让innerHTML里的字符作为一个个对象独立地被获取，除了你代码中的加Tag，还有什么其他方法吗？谢谢！

ONEBOYS 回复:
六月 18th, 2013 at 14:13

@Zenggo, 字符串“hello,world!”[2]可以通过这样取单个字符，不过我想你说的一个个对象应该指的是作为DOM元素吧？但因为Tag内的文字只构成Text Node，算是一个整体（一个DOM元素），拆开了获取不太好弄。在 css中有一个伪元素的概念：比如p:first-letter就表示P文本段内的首字母，再如::selection（CSS3中新增）表示被鼠标选中的文本，伪类很有限，就那么几个。如果要更大自由的针对Text Node做操作，就需要Range对象了，不过，针对我们上面的demo使用Range也是不好实现的，样式操作还是基于Tag的。