JavaScript特效源码，1、文字特效

2024-02-27 14:48•javascript•阅读 3306

注：本文以及以下关于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 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 >
<p><font color="#FF8080">:-)</font></p>
</div><div >
<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 >
<p><font color="#FF8080">:-)</font></p>
</div><div >
<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 );
}
else {
document.write("<div );
}
function changeCharColor() {
if (navigator.appName == "Netscape") {
document.a.document.write("<center><font  + fontsize + "><font color=" + color1 + 
">");
for (var j = 0; j < text.length; j++) {
if(j == i) {
document.a.document.write("<font  + 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  + fontsize + "><font color=" + color1 + ">";
for (var j = 0; j < text.length; j++) {
if( j == i) {
str += "<font  + 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 >
<p>
谢谢您的使用！
</p></div>
<script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>

6、打字时候的特效

打字效果的文字特效[修改显示的文字即可]
[根据下面的说明进行共1步]

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

<script language=javascript>
var layers =document.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 ><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 ></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 >这里是要显示的文字</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>

上一篇 »JavaScript鼠标拖拽特效及相关问题总结
下一篇 »国外10大Ajax/Javascript特效的站点

JavaScript特效源码，1、文字特效

相关推荐

CSS3实现文字抹开特效

css3特效

CSS特效

css 翻牌 翻转 3d翻转 特效

纯css实现下雪特效

css3 animation动画特效插件的巧用

CSS特效

CSS3翻转特效；

css 翻牌翻转 3d翻转特效