首页 > 代码库 > JavaScript特效源码(1、文字特效)
JavaScript特效源码(1、文字特效)
1、逐隐逐现的的特效
逐隐逐现的文字特效[推荐使用][适用于IE4++]（修改显示的文字后根据说明进行共2步）1、以下代码放在一个新建页面的HTML的<body></body>区即可：[页面上必须什么都没有]<html><head><TITLE>特效</TITLE> </head><script language=javaScript><!-- //var thissize=20var textfont="隶书"var textcolor= new Array()textcolor[0]="000000"textcolor[1]="000000"textcolor[2]="000000"textcolor[3]="111111"textcolor[4]="222222"textcolor[5]="333333"textcolor[6]="444444"textcolor[7]="555555"textcolor[8]="666666"textcolor[9]="777777"textcolor[10]="888888"textcolor[11]="999999"textcolor[12]="aaaaaa"textcolor[13]="bbbbbb"textcolor[14]="cccccc"textcolor[15]="dddddd"textcolor[16]="eeeeee"textcolor[17]="ffffff"textcolor[18]="ffffff"var message = new Array()message[0]="http://www.happydrips.com"message[1]="HappyDrips工作室"message[2]="谢谢您使用"message[3]="javascript源码大全"i_message=0var i_strength=0var i_message=0var timerfunction glowtext() { if(document.all) {if (i_strength <=17) {glowdiv.innerText=message[i_message]document.all.glowdiv.style.filter="glow(color="+textcolor[i_strength]+", strength=4)"i_strength++timer=setTimeout("glowtext()",100)}else {clearTimeout(timer)setTimeout("deglowtext()",1500)}}}function deglowtext() { if(document.all) {if (i_strength >=0) {glowdiv.innerText=message[i_message]document.all.glowdiv.style.filter="glow(color="+textcolor[i_strength]+", strength=4)"i_strength--timer=setTimeout("deglowtext()",100)}else {clearTimeout(timer)i_message++if (i_message>=message.length) {i_message=0}i_strength=0intermezzo()}}}function intermezzo() { glowdiv.innerText=""setTimeout("glowtext()",1500) }//--></script><body bgcolor="#000000" onl oad="glowtext()"> //不要忘记写 <div id="glowdiv" style="position:absolute;visibility:visible;width:600px;text-align:center; top:150px;left:50px;font-family:隶书;font-size:30pt;color:000000"></div></body></html>2、[可选项]修改<div>标签内的代码可以确定文字显示的位置，颜色和大小。top是距离屏幕上面的距离，left是距离坐侧的距离。font-size是文字大小，color是颜色。width是DIV层的宽度。由于文字是用DIV来控制的，所以在DIV的宽度范围内不能有其它内容。DIV的位置用绝对位置(position:absolute)表示。 2、超酷的文字特效
超酷的文字特效[特别推荐][共2步]1、将以下代码加入HEML的<head></head>之间：<script><!--//var x,yvar timervar i_fontsize=0var step=0var thisx,thisyfunction handlerMM(e){x = (document.layers) ? e.pageX : event.clientXy = (document.layers) ? e.pageY : event.clientY}function ringup() {if (document.all) {thisx = xthisy = yringup2()}}function ringup2() {if (i_fontsize<=1000) { document.all.ring.style.fontSize=i_fontsizedocument.all.ring.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"document.all.ring.style.posLeft=thisx-(Math.floor(i_fontsize/3))document.all.ring.style.posTop=thisy-(Math.floor(i_fontsize/1.4))step+=4i_fontsize+=steptimer=setTimeout("ringup(2)",50)}else {clearTimeout(timer)i_fontsize=0step=0document.all.ring.style.posTop=-10000}}document.onmousemove = handlerMM;//--></script><style>.ringstyle {position:absolute;visibility:visible;top:-50px;font-size:5pt;font-family:Verdana;color:FF0000}.explain {position:absolute;top:80px; left:40px; width:300px; color:000000;text-align:center;font-size:20pt;font-family:Times;}</style>2、将以下代码加入HEML的<body></body之间><div id="ring" class="ringstyle"><p><font color="#FF8080">:-)</font></p></div><div id="redirection" class="explain"><p>移动你的鼠标到这里来看看<a target="_blank" onm ouseOver="ringup()"href="http://www.happydrips.com">是不是很棒的效果</a></p>3、阴影文字的特殊效果
超酷的文字特效[特别推荐][共2步]1、将以下代码加入HEML的<head></head>之间：<script><!--//var x,yvar timervar i_fontsize=0var step=0var thisx,thisyfunction handlerMM(e){x = (document.layers) ? e.pageX : event.clientXy = (document.layers) ? e.pageY : event.clientY}function ringup() {if (document.all) {thisx = xthisy = yringup2()}}function ringup2() {if (i_fontsize<=1000) { document.all.ring.style.fontSize=i_fontsizedocument.all.ring.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"document.all.ring.style.posLeft=thisx-(Math.floor(i_fontsize/3))document.all.ring.style.posTop=thisy-(Math.floor(i_fontsize/1.4))step+=4i_fontsize+=steptimer=setTimeout("ringup(2)",50)}else {clearTimeout(timer)i_fontsize=0step=0document.all.ring.style.posTop=-10000}}document.onmousemove = handlerMM;//--></script><style>.ringstyle {position:absolute;visibility:visible;top:-50px;font-size:5pt;font-family:Verdana;color:FF0000}.explain {position:absolute;top:80px; left:40px; width:300px; color:000000;text-align:center;font-size:20pt;font-family:Times;}</style>2、将以下代码加入HEML的<body></body之间><div id="ring" class="ringstyle"><p><font color="#FF8080">:-)</font></p></div><div id="redirection" class="explain"><p>移动你的鼠标到这里来看看<a target="_blank" onm ouseOver="ringup()"href="http://www.happydrips.com">是不是很棒的效果</a></p>4、彩色文字的特殊效果
彩色文字的特殊效果[推荐使用][根据下面的说明进行修改即可共1步]1、以下代码放在HTML的<body></body>区即可：[适当的位置]：<script language="JavaScript"><!-- Begintext = "javascript源码大全"; //显示的文字color1 = "blue"; //文字的颜色color2 = "red"; //转换的颜色fontsize = "8"; //字体大小speed = 100; //转换速度 (1000 = 1 秒) i = 0;if (navigator.appName == "Netscape") {document.write("<layer id=a visibility=show></layer><br><br><br>");}else {document.write("<div id=a></div>");}function changeCharColor() {if (navigator.appName == "Netscape") {document.a.document.write("<center><font face=arial size =" + fontsize + "><font color=" + color1 + ">");for (var j = 0; j < text.length; j++) {if(j == i) {document.a.document.write("<font face=arial color=" + color2 + ">" + Text.charAt(i) + "</font>");}else {document.a.document.write(text.charAt(j));}}document.a.document.write(‘</font></font></center>‘);document.a.document.close();}if (navigator.appName == "Microsoft Internet Explorer") {str = "<center><font face=arial size=" + fontsize + "><font color=" + color1 + ">";for (var j = 0; j < text.length; j++) {if( j == i) {str += "<font face=arial color=" + color2 + ">" + text.charAt(i) + "</font>";}else {str += text.charAt(j);}}str += "</font></font></center>";a.innerHTML = str;}(i == text.length) ? i=0 : i++;}setInterval("changeCharColor()", speed);// End --></script> 5、升降的文字的特殊效果
升降的文字特殊效果[修改显示的文字即可][根据下面的说明进行共1步]1、以下代码放在HTML的<body></body>之间[适当的位置]：<script language="JavaScript"><!--done = 0;step = 4function anim(yp,yk){if(document.layers) document.layers["napis"].top=yp;else document.all["napis"].style.top=yp;if(yp>yk) step = -4if(yp<60) step = 4setTimeout(‘anim(‘+(yp+step)+‘,‘+yk+‘)‘, 35);}function start(){if(done) returndone = 1;if(navigator.appName=="Netscape") {document.napis.left=innerWidth/2 - 145;anim(60,innerHeight - 60)}else {napis.style.left=11;anim(60,document.body.offsetHeight - 60)}}//--></script><div id="napis" style="position: absolute;top: -50;color: #000000;font-family:宋体;font-size:9pt;"><p>谢谢您的使用！</p></div><script language="JavaScript"><!--setTimeout(‘start()‘,10);//--></script>6、打字时候的特效
打字效果的文字特效[修改显示的文字即可][根据下面的说明进行共1步]1、以下代码放在HTML的<body></body>之间[适当的位置]：<script language=javascript>var layers =document.layers,style=document.all,both=layers||style,idme=908601;if(layers){layerRef=‘document.layers‘;styleRef =‘‘;}if(style){layerRef=‘document.all‘;styleRef = ‘.style‘;}function writeOnText(obj,str){if(layers)with(document[obj]){ document.open();document.write(str);document.close();}if(style)eval(obj+‘.innerHTML=str‘); }var dispStr=new Array("javascript源码大全");var overMe=0;function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){var tmp0=tmp1= ‘‘,skip=100;if (both && idx<=str.length) {if (str.charAt(idx)==‘<‘){ while(str.charAt(idx)!=‘>‘) idx++;idx++;}if (str.charAt(idx)==‘&‘&&str.charAt(idx+1)!=‘ ‘){ while (str.charAt(idx)!= ‘;‘)idx++;idx++;}tmp0 = str.slice(0,idx);tmp1 = str.charAt(idx++);if (overMe==0 && plysnd==1){if (navigator.plugins[0]){if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds[0].stop();setTimeout("document.embeds[0].play(false)",100);}} else if (document.all){ding.Stop();setTimeout("ding.Run()",100);}overMe=1;}else overMe=0;writeOnText(idObj, "<span class="+spObj+"><font color=‘"+clr1+"‘>"+tmp0+"</font><font color=‘"+clr2+"‘>"+tmp1+"</font></span>");setTimeout("txtTyper(‘"+str+"‘, "+idx+", ‘"+idObj+"‘, ‘"+spObj+"‘, ‘"+clr1+"‘, ‘"+clr2+"‘, "+delay+" ,"+plysnd+")",delay);}}function init(){txtTyper(dispStr[0], 0, ‘ttl0‘, ‘ttl1‘, ‘#339933‘, ‘#99FF33‘, 300, 0);}</script><BODY onl oad=init()><DIV class=ttl1 id=ttl0></DIV></BODY> 7、淡入淡出文字特效
淡入淡出的文字效果[根据下面的说明进行共3步]1、以下代码放在HTML的<head></head>之间：<script language="javaScript"><!--function checkBrowserForVersion4(){var x=navigator.appVersion;y=x.substring(0,4);if(y>=4) Effect();}var isNav=(navigator.appName.indexOf("Netscape")!=-1);var colors=new Array("FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9","E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1","B9B9B9","B1B1B1","A9A9A9","A1A1A1","999999","919191","898989","818181","797979","717171","696969","616161","595959","515151","494949","414141","393939","313131","292929","212121","191919","111111","090909","000000")a=0,b=1function Effect(){color=colors[a];//*改改下面的文字内容即可,可使用HTML语法，但是注意引号不要混用。双引号内是单引号。*//aa="<font size=‘5‘><font face=‘Arial, Helvetica, sans-serif‘><font color="+color+">Save page and Get Code !<p>Enjoy All These Free Javascripts ......</font></font></font>"if(isNav) {document.object1.document.write(aa);document.object1.document.close();}else object1.innerHTML=aaa+=b;if (a==38) b-=2;if (a==0) b+=2;xx=setTimeout("Effect()",10);}//--></script>2、以下代码放在HTML的<body></body>之间[适当的位置]：<body onl oad="checkBrowserForVersion4()" ><div id="object1" style="position:absolute; visibility:show; left:181px; top:113px; z-index:2"></div>3、特别说明：只要改变上面的TOP值和LEFT值即可确定文字显示的绝对位置。TOP表示文字距离屏幕顶部的距离（象素），LEFT是离屏幕左侧的距离。上面有一大堆乱七八糟的字符是确定渐变的颜色数组。 8、炽热文字的特效
炽热文字的特殊效果[适用于IE4++]（根据下面的说明进行共3步）1、将以下代码加入HEML的<head></head>之间：<style><!--#glowtext{filter:glow(color=red,strength=2);width:100%;}--></style><script language="JavaScript1.2">function glowit(which){if (document.all.glowtext[which].filters[0].strength==2)document.all.glowtext[which].filters[0].strength=1elsedocument.all.glowtext[which].filters[0].strength=2}function glowit2(which){if (document.all.glowtext.filters[0].strength==2)document.all.glowtext.filters[0].strength=1elsedocument.all.glowtext.filters[0].strength=2}function startglowing(){if (document.all.glowtext&&glowtext.length){for (i=0;i<glowtext.length;i++)eval(‘setInterval("glowit(‘+i+‘)",150)‘)}else if (glowtext)setInterval("glowit2(0)",150)}if (document.all)window.onload=startglowing</script>2、将以下代码加入到HEML的<body></body>之间[适当的位置]：<span id="glowtext">这里是要显示的文字</span>3、[可选项]改变文字颜色和背景色可以得到不同的效果。文字颜色修改，只要修改filter:glow(color=red,strength=2); 中的color项,strength为颜色的深度值 。9、状态栏文字特效
状态栏中的文字[修改显示的文字后复制到<body></body>]<script language=JavaScript>var MESSAGE="javascript源码大全"var POSITION=100var DELAY=5var scroll=new statusMessageObject()function statusMessageObject(p,d){this.msg =MESSAGEthis.out =" "this.pos =POSITIONthis.delay=DELAYthis.i=0this.reset=clearMessage}function clearMessage(){this.pos=POSITION}function scroller(){for (scroll.i=0;scroll.i<scroll.pos;scroll.i++){scroll.out += " "}if (scroll.pos >= 0)scroll.out += scroll.msgelse scroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)window.status=scroll.outscroll.out=" "scroll.pos--if (scroll.pos < -(scroll.msg.length)) {scroll.reset()}setTimeout(‘scroller()‘,scroll.delay)}function snapIn(jumpSpaces,position){var msg = scroll.msgvar out = ""for(var i=0; i<position; i++) {out+= msg.charAt(i)}for(i=1;i<jumpSpaces;i++) {out += " "}out+=msg.charAt(position)window.status = outif(jumpSpaces <= 1) {position++if(msg.charAt(position) == ‘ ‘) {position++ }jumpSpaces = 100-position}else if (jumpSpaces > 3){jumpSpaces *= .75}else{jumpSpaces--}if(position != msg.length) {var cmd = "snapIn(" + jumpSpaces + "," + position + ")";scrollID = window.setTimeout(cmd,scroll.delay);}else{window.status=""jumpSpaces=0position=0cmd = "snapIn(" + jumpSpaces + "," + position + ")";scrollID = window.setTimeout(cmd,scroll.delay);return false }return true}snapIn(100,0);</script>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。