查看: 2036|回复: 5

[教程] 模仿韩国GOOGLE的特效

[复制链接]

签到天数: 1 天

[LV.1]初来乍到

鲜花(0) 鸡蛋(0)
发表于 2007-12-20 23:18 | 显示全部楼层 |阅读模式
模仿韩国GOOGLE的特效
演示地址:http://bbs.6co.cn/a/b/google.htm

把鼠标移到文字上即可看到效果!
代码在二楼!

签到天数: 1 天

[LV.1]初来乍到

鲜花(0) 鸡蛋(0)
 楼主| 发表于 2007-12-20 23:19 | 显示全部楼层
<!DOCTYPE HTML PUBLIC \\"-//W3C//DTD HTML 4.01 Transitional//EN\\" \\"http://www.w3.org/TR/html4/loose.dtd\\"> <html> <head> <meta http-equiv=\\"Content-Type\\" content=\\"text/html;charset=gb2312\\"> <title>测试效果</title> <style type=\\"text/css\\"> <!-- body {text-align:center} table {border:1px solid #eeeeee;padding:3px 0;border-bottom-width:5px} .icon td {width:50px;height:37px;background-image:url(http://bbs.6co.cn/a/b/svc_sprite_all.gif)} .capt td {font:normal 11px verdana;padding:2px 0} .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,ct,7); } function cssAni(osrc,otarget,num,duration){ //////// //IE only //by mozart0, 2007.06.09 //////// 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> </head> <body> <table> <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=\'#;\'>A</a></td> <td><a href=\'#;\'>B</a></td> <td><a href=\'#;\'>C</a></td> <td><a href=\'#;\'>D</a></td> <td><a href=\'#;\'>E</a></td> <td><a href=\'#;\'>F</a></td> <td><a href=\'#;\'>G</a></td> </tr> </table> </body> </html>

签到天数: 1 天

[LV.1]初来乍到

鲜花(0) 鸡蛋(0)
发表于 2007-12-21 00:42 | 显示全部楼层
这个可以用在做FLASH上的超连接按钮吗 ?

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-8-13 15:36 | 显示全部楼层
测试效果
A B C D E F G

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-9-2 16:37 | 显示全部楼层
已经失效了

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-9-2 18:46 | 显示全部楼层

試试看 谢謝

测试效果
A B C D E F G































您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

网站地图|小黑屋|Archiver|中画网 ( 蜀ICP备11021737号-2 )|网站地图

GMT+8, 2024-11-15 09:45 , Processed in 0.058820 second(s), 17 queries , MemCached On.

上网要文明 发言要理性

Powered by Discuz! © 2008-2023 YinHuaBBS.CN

快速回复 返回顶部 返回列表