`
huanyq2008
  • 浏览: 166542 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

霓虹灯效果

FlashprototypeIECacheJavaScript 
阅读更多

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html oncontextmenu='window.event.returnValue=false' xmlns="http://www.w3.org/1999/xhtml">  
<head>
<title>霓虹灯效果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<style type="text/css">
.normalTxt {
	font-size: 12px;
	color: #333;
}

.changeTxt {
	font-size: 12px;
	color: #f00;
	/**font-weight: bold;*/
}
</style>
		<script type="text/javascript">
function dynamicText(){
	this.container = document.getElementById(arguments[0]);
	if(!this.container){
		alert("您要设置的\"" + arguments[0] + "\"初始化错误\r\n请检查标签ID设置是否正确!");
		this.container = -1;
		return;
	}
	if(document.all){
		var txt = this.container.innerHTML;
		this.Length = txt.length;
	   	var str = "";
	   	var flag = arguments[0];
	   	for (m=0; m<this.Length; m++){
	   	 	str += '<font id="dyTxt_'+flag+'" class="normalTxt">'+txt.charAt(m)+'</font>';
	  	}
	  	this.container.innerHTML = str;
	    this.fontObjs = document.getElementsByName("dyTxt_"+flag);
	    this.IntervalTimer = 0;
	    this.TimeoutTimer = 0;
	    this.Index = 0;
	    this.FirstCss = "normalTxt";
	    this.SecondCss = "changeTxt";
		this.Start();
	}
}

dynamicText.prototype.Start = function(){
	if(this.container == -1)return;
	var obj = this;
	clearTimeout(obj.TimeoutTimer);
	obj.flashObj = function(){obj.Flash()};
	obj.IntervalTimer = setInterval(obj.flashObj,20);
}
dynamicText.prototype.Flash = function(){
	var obj = this;
	 obj.fontObjs[obj.Index].className=obj.SecondCss;
	 if (obj.Index<obj.fontObjs.length-1){
	    	obj.Index++;
	 }else{
		    obj.Index = 0;
		    clearInterval(obj.IntervalTimer);
		    var temp = obj.SecondCss;
		    obj.SecondCss = obj.FirstCss;
		    obj.FirstCss = temp;
		    obj.startObj = function(){obj.Start()};
		    obj.TimeoutTimer = setTimeout(obj.startObj,3000);
		    return;
	 }
}

window.onload = function(){
	var box = document.getElementById("testBox");
	var spanObj;
	for(i=0;i<10;i++){
		spanObj = $$("span");
		spanObj.id = "container" + i;
		spanObj.innerHTML = "JavaEye-最棒的软件开发交流社区";
		box.appendChild(spanObj);
		box.appendChild($$("br"));
		new dynamicText("container" + i);
	}
}
$$ = function(name){
	return document.createElement(name)
}
</script>
	</head>
	<body>
	 <DIV id="testBox"></DIV>
	</body>
</html>

 

 

 

网上一般只有初始化一个的例子。本人写了这个可以同时初始化多个霓虹灯效果。经测试：设置在20个左右的时候，CPU的占用峰值在5%左右。随着个数的增加，cpu的占用率也会增加。如果超过50个的时候，建议使用gif动画图片.

0
顶
0
踩
分享到：
| 子页面和父页面的相互调用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics