Js+CSS定义神奇的下划线

2024-09-05 12:22:29

字体：大中小

来源：转载

供稿：网友

神奇的下划线，采用JavaScript技术与CSS技术结合，打造炫彩的下划线效果，就像Windows2000系统加载时的彩条一样，完全用JS控制生成的程序，非GIF图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url] "><html xmlns=" [url]http://www.w3.org/1999/xhtml[/url] "><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>神奇的下划线</title>  <style>    body{background:#EEE;}    div#box{text-decoration:underline;color:blue;font:900 77px "宋体";}        div#box em{color:red;text-decoration:underline;}  </style></head><body>   <div id="box"> <em> </em> <em> </em> <em> </em> <em> </em></div>   <div id="x">1</div><script type="text/javascript">window.onload=function(){	a();}var a=function(){	show("box","#abcdef");	hide("box","em","pink");	setTimeout("b()",500);}var b=function(){	show("box","pink");	hide("box","em","#abcdef");	setTimeout("a()",500);}var show=function(id,color){	var box=document.getElementById(id);	box.style.color=color;	}var hide=function(id,element,color){	var ems=document.getElementById(id).getElementsByTagName(element);	var i;	for(i=0;i<ems.length;i +=1){		ems[i].style.color=color;	}	var box=document.getElementById("box");}</script></body></html>

上一篇：搜狗云输入法源代码

下一篇：Google的do a barrel roll效果代码