google清明节

貌似这博客已经长满荒草，实在可惜，可叹。。
今天看到有人说扒google清明节效果，这不闲得蛋疼就随便写了下，也借此来锄草。

字数不够还不能发布，得，就讲下思路，供菜鸟参考。
首先是把雨点当做一个对象来处理，给它固定了一些属性，比如动画执行间隔时间，动画执行祯数，以及背景图片的高度间隔，并传入了雨滴位置(x,y)的参数。
剩下的就是创建一个span元素，也就是传说中的雨滴啦，当然利用背景定位来模拟动画效果，这个你懂的，google已经不是第一次干这事了。
值得说下的是用到了css3的transform，貌似这个属性功能是灰常强大的，感兴趣的自行搜索了解下。废话就这么多吧，上代码。。。

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>google清明节</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
td, input, textarea, select, option {font-size: 12px;font-family: tahoma;}
a {color: #959595;text-decoration: none;}
a:hover {color: #333;}
img, fieldset {border: 0 none;}
form { margin: 0;}

html{height:100%;width:100%;}
body{background-color:#fff;height:100%;width:100%;position:relative;background:url(http://www.google.com.hk/images/easteregg/qingming_willow.png) right top no-repeat;overflow:hidden;}
</style>
</head>
<body>
	
</body>
</html>
<script type="text/javascript">
document.body.onload=function(){
	var docMap={X:[0,document.body.scrollHeight-94],Y:[0,document.body.scrollWidth-201]};
	var t=setInterval(function(){
		var arr=[parseInt(Math.random()*docMap.Y[1]),parseInt(Math.random()*docMap.X[1])];
		var r=new rain(arr);
		if(r.el){
			r.el.style.MozTransform=r.el.style.WebkitTransform=r.el.style.MsTransform='scale('+parseInt(Math.random()*8)/10+')';
		}
	},300);
}
document.body.onclick=function(e){
	e=e||window.event;
	var arr=[e.clientX,e.clientY];
	new rain(arr);
};
var rain=function(pos){
	this.time=130;
	this.maxSize=8;
	this.len=-92;
	this.createEl(pos);
}
rain.prototype={
	createEl:function(elPosXY){
		var sp=document.createElement('span');
		sp.style.cssText='-moz-transform: scale(1);background-image:url(http://www.google.com.hk/images/easteregg/qingming_ripple.png);background-position:0 0;height:94px;opacity:100;position: absolute;width:201px;z-index:6;';
		this.el=sp;
		if(elPosXY.length>0){
			this.el.style.left=parseInt(elPosXY[0])-100+'px';
			this.el.style.top=parseInt(elPosXY[1])-47+'px';
		}
		document.body.appendChild(this.el);
		this.transform();
	},
	transform:function(){
		var i=1,h,_this=this,t;
		t=setInterval(function(){
			h=_this.len*i;
			_this.el.style.backgroundPosition='0 '+h+'px';
			if(i>=_this.maxSize){
				clearInterval(t);
				_this.el.style.opacity=0;
				document.body.removeChild(_this.el);
			}
			i++;
		},_this.time);
	}
}
</script>

posted @ 2012-04-06 16:45 冰封e族阅读(358) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

H.O.T

Hacker.Operate.Technology

google清明节

公告