逐个文本变色代码

2013-08-18 10:14:06 -0700

<style type="text/css">
.box{
	position:relative;
	width:1000px;
}
.comm{
	font-size:60px;
	color:#ddd;
	font-family:黑体;
	position:absolute;
	top:0;
	left:0;
}
.red{
	color:#0000FF;
	width:0;
	overflow:hidden;
	white-space:nowrap;
	z-index:10;
}
</style>
</head>
<body>

<div class="box">
	<strong id="Title" class="comm">quan0网盘0000000000000000</strong>
</div>
<script language="javascript">
function getStyle(elem, name){
	if (elem.style[name])
		return elem.style[name];
	else if (elem.currentStyle)
		return elem.currentStyle[name];
	else if (document.defaultView && document.defaultView.getComputedStyle) {
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();
		var s = document.defaultView.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);}
	else return null;
}
(function(){
	var lb = document.getElementById("Title"),
	lt = lb.cloneNode(true),
	i = 0,
	sw = parseInt(getStyle(lb,'width'));
	lt.setAttribute('id',lb.getAttribute('id')+'1');
	lt.className = 'comm red';
	lb.parentNode.appendChild(lt);
	window.sliderFont = setInterval(function(){
		parseInt(getStyle(lt,'width')) >= sw ? clearInterval(window.sliderFont) : lt.style['width'] = i++ + 'px';
	},10);
})();
</script>
</body>

演示：看下面

quan0网盘0000000000000000

«Newer Older»

Back to home

Subscribe | Register | Login | N