ec用户有福了“Google韩国首页“前卫”改版 添加新导航图标”提供下载
Google韩国首页近日进行了颇为“前卫”的改进,让用户眼前一亮。Google韩国的新首页放弃了Google一贯的极简风格,不仅添加了花哨可爱的新导航图标,还有颇具人情味的动画效果,只要你的鼠标放在图标上,便会自动展示一个小会话框解释这一服务的用途。
与Google韩国相比,谷歌的界面就显得过于保守,也许欧美人偏爱简洁,但是对于并不了解各种Google服务的绝大多数中国用户来说,一个小小的亲切的讲解框比长篇的教程更容易打动普通用户。
[attach]5242[/attach]
[b][size=4][color=darkred]韩国首页演示地址:[/color][/size][/b][url=http://www.google.co.kr/][b][size=4][color=darkred]http://www.google.co.kr/[/color][/size][/b][/url]
[b][size=4][color=darkred]中国首页演示地址:[/color][/size][/b][url=http://www.baizoo.cn/google/][b][size=4][color=darkred]http://www.baizoo.cn/google/[/color][/size][/b][/url]
[b][size=4][color=darkred][/color][/size][/b]
[url=http://download.makewing.com/lanren/menu/google_kr.rar][b][size=4][color=darkred]韩国版本的源码下载[/color][/size][/b][/url]
这是国内一个人自己做的一个研究文章,有源码的
[url=http://www.nijj.cn/blog/article.asp?id=41]http://www.nijj.cn/blog/article.asp?id=41[/url]
[[i] 本帖最后由 dasiji 于 2007-11-21 09:15 编辑 [/i]] 这算入乡随俗吧.. javascript仿韩国Google效果需要的图片:
[img=372,259]http://www.sosuo8.com/article/upimages3/svc_sprite_all.gif[/img]
这是找到的国内另外一个更简洁的代码示例代码:
[url=http://www.sosuo8.com/article/show.asp?id=1485][size=5][color=red]演示网址[/color][/size][/url]
[quote]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>SooJs_仿韩国Google效果</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
<STYLE type=text/css>BODY {
TEXT-ALIGN: center
}
TABLE {
BORDER-RIGHT: #eeeeee 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #eeeeee 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; BORDER-LEFT: #eeeeee 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #eeeeee 5px solid
}
.icon TD {
BACKGROUND-IMAGE: url(/article/upimages3/svc_sprite_all.gif); WIDTH: 50px; HEIGHT: 37px
}
.capt TD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; FONT: 11px verdana; PADDING-TOP: 2px
}
.a {
BACKGROUND-POSITION-Y: 0px
}
.b {
BACKGROUND-POSITION-Y: -37px
}
.c {
BACKGROUND-POSITION-Y: -74px
}
.d {
BACKGROUND-POSITION-Y: -111px
}
.e {
BACKGROUND-POSITION-Y: -148px
}
.f {
BACKGROUND-POSITION-Y: -185px
}
.g {
BACKGROUND-POSITION-Y: -222px
}
.f1 {
BACKGROUND-POSITION-X: 0px
}
.f2 {
BACKGROUND-POSITION-X: -51px
}
.f3 {
BACKGROUND-POSITION-X: -101px
}
.f4 {
BACKGROUND-POSITION-X: -153px
}
.f5 {
BACKGROUND-POSITION-X: -205px
}
.f6 {
BACKGROUND-POSITION-X: -257px
}
.f7 {
BACKGROUND-POSITION-X: -309px
}
</STYLE>
<SCRIPT language=javascript>
window.onload=function(){
var t=document.getElementsByTagName('table')[0];
var cs=t.rows[1].cells,ct=t.rows[0].cells;
for(var i=0;i<cs.length;i++)
cssAni(cs[i],ct[i],7);
}
function cssAni(osrc,otarget,num,duration){
var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);
var s=otarget.className.replace(/.$/,''),r=/over/;
osrc.onmouseover=osrc.onmouseout=function(e){
n=r.test((e||event).type)?1:-1;
if(!t) t=setInterval(function(){
if((c==1||c==num)&&((d==n||c+n<1)||!(d=n)))
return clearInterval(t),t=null;
otarget.className=s+(c+=d);
},i);
};
}
</SCRIPT>
<META c name=GENERATOR></HEAD>
<BODY>
<TABLE>
<TBODY>
<TR class=icon>
<TD class="a f1"></TD>
<TD class="b f1"></TD>
<TD class="c f1"></TD>
<TD class="d f1"></TD>
<TD class="e f1"></TD>
<TD class="f f1"></TD>
<TD class="g f1"></TD></TR>
<TR class=capt>
<TD><A
href="javascript:void(null)">A</A></TD>
<TD><A
href="javascript:void(null)">B</A></TD>
<TD><A
href="javascript:void(null)">C</A></TD>
<TD><A
href="javascript:void(null)">D</A></TD>
<TD><A
href="javascript:void(null)">E</A></TD>
<TD><A
href="javascript:void(null)">F</A></TD>
<TD><A
href="javascript:void(null)">G</A></TD></TR></TBODY></TABLE>
</BODY></HTML>
[/quote][/i][/i]
[[i] 本帖最后由 dasiji 于 2007-11-21 09:27 编辑 [/i]] "ec用户有福了"
这和EC用户有什么关系???
回复 #1 dasiji 的帖子
写那么多的代码不累吗?用 Flash 一样能做出这个效果,而且还简单得多。
学以致用~~举一反三才是上上策! 楼上的,也有道理 广告一个!
不过可以提示一下,它主要是用来CSS Sprit技术! 哎...///// *** 作者被禁止或删除 内容自动屏蔽 ***
有点意思
*** 作者被禁止或删除 内容自动屏蔽 *** 谢谢楼主啊~~页:
[1]
