Google首页logo太极动画效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Google首页logo太极动画效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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首页logo太极动画效果</title>

<style type="text/css">
#hplogo{position:relative;cursor:pointer;width:403px;height:156px;margin:120px auto 0 auto;background:#fff none repeat 0% 0% scroll;}
#hplogo div{position:absolute;}
</style>

<script type="text/javascript" src="script.js"></script>

</head>
<body>

    <div id="hplogo">
        <a href="#"><img border="0" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" src="images/graham11-hp-start.png" /></a>
    </div>
</body>
</html>

JS代码(script.js):

(function(){
	try{
	//浜岀淮鏁扮粍瀹氫箟155寮犲浘鐗囩殑淇℃伅锛屽垎鍒槸[鍥剧墖鐨刲eft,top,width,height,1锛堟爣璁帮紝閮ㄥ垎鏁扮粍鏈夛級]//鏁扮粍涓渶鍚庝竴涓€尖€?鈥濇槸涓€涓爣璁帮紝琛ㄧず鍥剧墖鎹㈣var arrImg = [[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]],imgLen = arrImg.length,//鍥剧墖鏁扮粍闀垮害imgIndex,imgLeft,imgTop,maxHeight,//鍒嗗埆浠ｈ〃 褰撳墠鍥剧墖搴忓彿锛宐ackground-position涓殑left,top锛屼竴琛屽浘鐗囦腑鐨勬渶澶ч珮搴?fun = -1,//鍚庨潰setTimeout鐨勮繑鍥炲€硷紝鍋氭爣璁帮紝鍚庨潰鐢ㄥ埌funImgClick = function(){
	//鐐瑰嚮鍥剧墖鐨勪簨浠讹紙璺宠浆鍒癎OOGLE鎼滅储椤甸潰锛?window.location.href = "https://www.google.com/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"}
,funMakeAnimate = function(){
	//鍒涘缓骞舵墽琛屽姩鐢荤殑鏂规硶锛屾瘡83姣璋冪敤涓€娆★紝鍒涘缓涓€涓狣IV骞惰缃睘鎬с€佽儗鏅浘//鍙栧嚭褰撳墠鍥剧墖淇℃伅var img = arrImg[imgIndex],//鎵€鏈塂IV閮芥坊鍔犲埌杩欎釜瀹瑰櫒wrap = document.getElementById("hplogo");
	if (wrap && img[0]){
	//寮€濮嬪垱寤篋IVvar div = document.createElement("div");
	div.id = "hplogo" + imgIndex;
	div.style.left = img[0] + "px";
	div.style.top = img[1] + "px";
	div.style.width = img[2] + "px";
	div.style.height = img[3] + "px";
	div.style.background = "url(images/graham11-hp-sprite.png) no-repeat " + -imgLeft + "px " + -imgTop + "px";
	div.onmousedown = funImgClick;
	//杩欓噷浣跨敤浜嗗埄鐢?&杩愮畻绗︾殑鎶€宸э紝涓嬮潰杩樹細鐢ㄥ埌杩欎釜鎶€宸?//鐩稿綋浜?if (img[3] > maxHeight){
	maxHeight = img[3];
}
"img[3] > maxHeight && (maxHeight = img[3]);
	//淇濊瘉maxHeight鍙栧綋鍓嶈鏈€澶х殑鍥剧墖楂樺害//濡傛灉鏈?涓€硷紝鍒欒鏄庢崲琛屼簡锛宭eft閲嶆柊浠?寮€濮嬶紝骞剁疮鍔爐op锛岃鏈€澶ч珮搴︽竻0//鍚﹀垯left绱姞褰撳墠鍥剧墖鐨勫搴?img[4] ? (imgLeft = 0,imgTop += maxHeight,maxHeight = 0):imgLeft += img[2];
	wrap.appendChild(div);
	++imgIndex;
	//缁х画鍔ㄧ敾imgIndex < imgLen && (fun = window.setTimeout(funMakeAnimate,83));
	//鍙堟槸 && 锛屽悓涓?}
}
,funInit = function(){
	//椤甸潰鍔犺浇鐨勬椂鍊欏氨鎵ц璇ュ嚱鏁帮紝鍒濆鍖栧彉閲忓苟璋冪敤鍔ㄧ敾鍑芥暟maxHeight = imgTop = imgLeft = imgIndex = 0;
	//濡傛灉鍔ㄧ敾宸茬粡鍦ㄦ挱鏀撅紝鍒欏厛鍋滄骞跺垹鎺夌浉搴旂殑DIV鑺傜偣//鍐嶆鍑虹幇 && 鐨勪娇鐢?fun != -1 && (window.clearTimeout(fun),fun = -1);
	//鍒犻櫎宸茬粡娣诲姞鐨凞OM鑺傜偣for (var index = 0;
	index < imgLen;
	++index){
	var div = document.getElementById("hplogo" + index);
	div && div.parentNode && div.parentNode.removeChild(div);
}
//绗竴娆¤皟鐢ㄥ姩鐢诲嚱鏁?fun = window.setTimeout(funMakeAnimate,83);
}
;
	var originImg = document.createElement("img");
	//椤甸潰onload灏辫皟鐢╢unInit鍑芥暟originImg.addEventListener ?originImg.addEventListener("load",funInit,false)://addEventListener鐢ㄤ簬Mozilla绯诲垪娴忚鍣紝绗笁涓弬鏁皍serCapture鑻ヤ负true,鍒欐祻瑙堝櫒閲囩敤Capture,鑻ヤ负false鍒欓噰鐢╞ubbing鏂瑰紡originImg.attachEvent("onload",funInit);
	//鐢ㄤ簬IE娴忚鍣?originImg.src = "images/graham11-hp-sprite.png";
}
catch (o){
	//GOOGLE鐨勯敊璇鐞?//google.ml(o,!1,{
	cause:"DOODLE"}
);
}
}
)()

附件:下载该文件资源,减少时间成本(增值服务)