JavaScript特效源码(1、文字特效)

时间：2022-03-20 15:54:07

注：本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全。

1、逐隐逐现的的特效

　

逐隐逐现的文字特效[推荐使用][适用于IE4++]

（修改显示的文字后根据说明进行共2步）

1、以下代码放在一个新建页面的HTML的<body></body>区即可：[页面上必须什么都没有]

<html>

<head>

<TITLE>特效</TITLE>

</head>

<script language=javaScript>

<!-- //

var thissize=20

var 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=0

var i_strength=0

var i_message=0

var timer

function 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=0

intermezzo()

}

}

}

function intermezzo() {

glowdiv.innerText=""

setTimeout("glowtext()",1500)

}

//-->

</script>

<body bgcolor="#000000" onLoad="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,y

var timer

var i_fontsize=0

var step=0

var thisx,thisy

function handlerMM(e){

x = (document.layers) ? e.pageX : event.clientX

y = (document.layers) ? e.pageY : event.clientY

}

function ringup() {

if (document.all) {

thisx = x

thisy = y

ringup2()

}

}

function ringup2() {

if (i_fontsize<=1000) {

document.all.ring.style.fontSize=i_fontsize

document.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+=4

i_fontsize+=step

timer=setTimeout("ringup(2)",50)

}

else {

clearTimeout(timer)

i_fontsize=0

step=0

document.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" onMouseOver="ringup()"

href="http://www.happydrips.com">是不是很棒的效果</a></p>

3、阴影文字的特殊效果

超酷的文字特效[特别推荐][共2步]

1、将以下代码加入HEML的<head></head>之间：

<script>

<!--//

var x,y

var timer

var i_fontsize=0

var step=0

var thisx,thisy

function handlerMM(e){

x = (document.layers) ? e.pageX : event.clientX

y = (document.layers) ? e.pageY : event.clientY

}

function ringup() {

if (document.all) {

thisx = x

thisy = y

ringup2()

}

}

function ringup2() {

if (i_fontsize<=1000) {

document.all.ring.style.fontSize=i_fontsize

document.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+=4

i_fontsize+=step

timer=setTimeout("ringup(2)",50)

}

else {

clearTimeout(timer)

i_fontsize=0

step=0

document.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" onMouseOver="ringup()"

href="http://www.happydrips.com">是不是很棒的效果</a></p>

4、彩色文字的特殊效果

彩色文字的特殊效果[推荐使用]

[根据下面的说明进行修改即可共1步]

1、以下代码放在HTML的<body></body>区即可：[适当的位置]：

<script language="JavaScript">

<!-- Begin

text = "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 = 4

function anim(yp,yk)

{

if(document.layers) document.layers["napis"].top=yp;

else document.all["napis"].style.top=yp;

if(yp>yk) step = -4

if(yp<60) step = 4

setTimeout('anim('+(yp+step)+','+yk+')', 35);

}

function start()

{

if(done) return

done = 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 onload=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=1

function 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=aa

a+=b;if (a==38) b-=2;if (a==0) b+=2;xx=setTimeout("Effect()",10);}

//-->

</script>

2、以下代码放在HTML的<body></body>之间[适当的位置]：

<body onload="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=1

else

document.all.glowtext[which].filters[0].strength=2

}

function glowit2(which){

if (document.all.glowtext.filters[0].strength==2)

document.all.glowtext.filters[0].strength=1

else

document.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=100

var DELAY=5

var scroll=new statusMessageObject()

function statusMessageObject(p,d){

this.msg =MESSAGE

this.out =" "

this.pos =POSITION

this.delay=DELAY

this.i=0

this.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.msg

else scroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)

window.status=scroll.out

scroll.out=" "

scroll.pos--

if (scroll.pos < -(scroll.msg.length)) {

scroll.reset()}

setTimeout('scroller()',scroll.delay)}

function snapIn(jumpSpaces,position){

var msg = scroll.msg

var 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 = out

if(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=0

position=0

cmd = "snapIn(" + jumpSpaces + "," + position + ")";

scrollID = window.setTimeout(cmd,scroll.delay);

return false }

return true}

snapIn(100,0);

</script>

相关文章