霓虹灯效果

最新推荐文章于 2022-10-05 23:39:09 发布

goodday2023

最新推荐文章于 2022-10-05 23:39:09 发布

阅读量85

点赞数

分类专栏： js相关文章标签： Flash prototype IE Cache JavaScript ViewUI

js相关专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html οncοntextmenu='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动画图片.