JS+css文字变换特效<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns
JS+css文字变换特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+css文字变换特效</title>
</head>
<body>
<script>
<!-- Beginning of JavaScript -
//改变字体的大小
var thissize=10
var textfont="Verdana"
//改变字体的颜色
var textcolor= new Array()
textcolorhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd="#4A4A4A"
//改变文字的内容
var message = new Array()
//messagehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd="div+css和table布局的讨论"
//messagehttp://www.w3.org/1999/xhtml="关于网页对客户端分辨率自适应策略的研究 "
//messagehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd="IE9将加强标签浏览功能 "
messagehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd="<center>用CSS3创造的10个精彩案例</center>"
messagehttp://www.w3.org/1999/xhtml="<center>2009年度最佳CSS设计</center>"
//messagehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd="2010年 Web的五项技术和五个趋势 "
//messagehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd="Opera点亮无所不在的网络生活 "
//messagehttp://www.w3.org/1999/xhtml="Google,Browser Size 帮你分析网站可用性 "
var i_blurstrength=20
var i_message=0
var i_textcolor=0
function blurtext() {
if(document.all) {
if (i_blurstrength >=-2) {
if (i_textcolor >=textcolor.length-1) {i_textcolor=textcolor.length-1}
blurthis.innerHTML="<span id='blurpit1' style='position:absolute;visibility:visible;width:250px;height:115; top:5px;left:0px;filter:blur(add=0,strength="+i_blurstrength+",direction=90);font-family:"+textfont+";font-size:"+thissize+"pt;color:"+textcolor[i_textcolor]+"'>"+message[i_message]+"</span>";
document.close()
i_blurstrength=i_blurstrength-2
i_textcolor++
var timer=setTimeout("blurtext()",50)
}
else {
if (i_textcolor >=textcolor.length-1) {i_textcolor=textcolor.length-1}
blurthis.innerHTML="<span id='blurit1' style='position:absolute;visibility:visible;width:250px;height:115; top:5px;left:0px;filter:blendTrans(duration=4.2);font-family:"+textfont+";font-size:"+thissize+"pt;color:#4A4A4A'>"+message[i_message]+"</span>";
i_message++
if (i_message>=message.length){i_message=0}
i_blurstrength=20
i_textcolor=0
clearTimeout(timer)
var timer=setTimeout("blurtext()",5000)
}
}
}
window.onload=blurtext
// - End of JavaScript - --></script>
<div id="sidebar" style="float:left;text-align:left;border-right:1px #eeeeee solid">
<div style="margin:5px 10px 10px 10px;width:245px;border:1px #aaaaaa solid;padding:9px 10px 9px 10px">
<div id="advantage" style="width:245px;">
<div class="sidebartitle" style="width:245px;margin:0;padding:0;"></div>
<div class="sidebarcontent" style="height:60px;margin:0 0 0 0;line-height:16px;overflow:hidden;white-space:normal;word-break:break-all;width:241px;text-align:left;padding:2px;background:#f2f2f2">
<DIV id=blurthis style="VISIBILITY: visible; WIDTH: 250px; POSITION: absolute; margin-top:10px">内容载入中……</DIV>
</div>
</body>
</html>