网页特效、Javascript代码，包括跑马灯、打字插效、不停变色的文字

最新推荐文章于 2021-06-10 16:52:24 发布

weixin_30731287

最新推荐文章于 2021-06-10 16:52:24 发布

阅读量211

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xtfge/p/9949088.html

版权

闲时收集一引动代码和大家分享

一、不停变色的文字

<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<title>不停变色的文字</title>
</head>
<body>
<script type="text/javascript">
var x=0;
function fun()
{
//arguments表示参数的集合，访问方法和数组的访问方法相同
this.length=fun.arguments.length;
for(var i=0;i<this.length;i++)
{
this[i]=fun.arguments[i];
}
}
var color=new fun("red","green","#ff00ff","#0000ff","#000000","#00ff00","#00ffff","#ff0ff0","#f0f0f0","#000fff");
document.write('<div id="div1"><font size=20 face=华文行楷><center>'+"是谁说过？时间仍在、。。是我们在飞逝"+'</center></font></div>');
function Rcolor()
{
document.all.div1.style.color=color[x];
x=Math.floor(Math.random()*color.length);//Math.random()表示随机产生一个0~1的数
}
setInterval("Rcolor()",500);
</script>
<div>

</div>
</HEAD>
<BODY>
</BODY>
</HTML>

二、文字跑马灯

<html>
<head>
<title>文字跑马灯效果</title>
<style>
center{color:Red;font-family:华文行楷;font-size:20px}
</style>
<script type="text/javascript">
   var time,possion=0;
   var x=0,y=0;
   document.bgColor="ccffff"
function Run()
{
    var m="                                                                                          每一段记忆，都有一个密码。只要时间，地点，人物组合正确，无论尘封多久，那人那景都将在遗忘中重新拾起。你也许会说“不是都过去了吗？”其实过去的只是时间，你依然逃不出，想起了就微笑或悲伤的宿命，那种宿命本叫“无能为力”。";
    var v=200;
    form1.show.value=m.substring(possion,possion+100);
    if(possion++==m.length)
         possion=0;
    time=setTimeout("Run()",v);
if(y==1)   //如果鼠标走了就不要再跑
{
   form1.show.value="";
   clearTimeout(time);
   y=0;
   x=0;
   possion=0;
   return;
}
}
function start()//鼠标来了赶紧跑
{
   x++;
   if(x==1)//如果它没离开过
      Run();
}
function stop()
{
   y=1;
}
function fun()
{
   document.write("<font color='red'size='20'>好玩吧！!</font>");
}
</script>
</head>
<body text="red">
<center>
<form method="post" name="form1" ID="Form1">
<input type="text" size="100" name="show" ID="Text1">
<a href="" onclick='fun()' onmousemove='start()' onmouseout='stop()'>你敢指着我吗</a>
</center>
</form>
</body>
</html>

三、打字效果

<html>
<head>
<embed src="Key board .mp3" quality=high loop="-1" width="1" height="1"></embed>

<title>打字效果</title>
<style type="text/css">
div{color:#ff0000;font-family:华文行楷;font-size:30px}
</style>
</head>
<script type="text/javascript">
var m="每一段记忆，都有一个密码。只要时间，地点，人物组合正确，无论尘封多久，那人那景都将在遗忘中重新拾起。你也许会说“不是都过去了吗？”其实过去的只是时间，你依然逃不出，想起了就微笑或悲伤的宿命，那种宿命本叫“无能为力”。";
var x=1;
var i=0;
var message="";
function dzxg()
{
x==m.length-1?x=0:x++;
message=m.substring(0,x)+"_";
document.getElementByIdx_x("d").innerHTML=message;
setTimeout("dzxg()",200);
}
</script>
<body onload="dzxg()" bgcolor="#fef4d9">
<div id="d">
</div>
</body>
</html>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

转载于:https://www.cnblogs.com/xtfge/p/9949088.html