文字动感模糊切换效果-JS特效-爱易网页

文字动感模糊切换效果

日期：2014-05-18　浏览次数：20218 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>爱易网网页特效演示，文字动感模糊切换效果</title>
</head>

<body>

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:600px; top:5px;left:5px;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:600px; top:5px;left:5px;filter:blendTrans(duration=4.2);font-family:"+textfont+";font-size:"+thissize+"pt;color:FF0000'>"+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()",2000)
}
} 
}
window.onload=blurtext
// - End of JavaScript - -->
</script>
<div id=mainbod 
style="LEFT: 10px; VISIBILITY: visible; POSITION: absolute; TOP: 180px"></div>
<div id=blurthis 
style="VISIBILITY: visible; POSITION: absolute"></div>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

文字动感模糊切换效果

相关资料更多>

推荐阅读更多>