特殊字符,Js实现滚动变色的文字效果

Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<META NAME=”Author” CONTENT=”goaler” />
<META NAME=”Keywords” CONTENT=”特殊字符、常规符号及其代码对照表”
/>
<META NAME=”Description” CONTENT=”特殊字符、常规符号及其代码对照表”
/>
<title>特殊字符、常规符号及其代码对照表</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

以下是源代码:

<body>
<div class=”menu_head”>
特殊字符、常规符号及其代码对照表
  <select id=”family” size=”1″ onChange=”JavaScript:chgFont();”
style=”color:red;”>
  <option selected value=”Webdings”>Webdings</option>
  <option value=”Wingdings”>Wingdings</option>
  <option value=”Wingdings 2″>Wingdings 2</option>
  <option value=”Wingdings 3″>Wingdings 3</option>
  <option value=”Symbol”>Symbol</option>
  </select>
</div>
 <script language=”JavaScript”>
 document.write(‘<table border=”1″ width=”100%” cellspacing=”0″
cellpadding=”2″>\n’);
 //document.write(‘<tr align=”center”>’);
 for (j=0;j<4;j++)
 {
  document.write(‘<td width=”7%” align=”center”
style=”font-size:14px;color:red;background:#D4D0C8″>代码</td>\n’);
  document.write(‘<td width=”11%” align=”center” id=”F’+j+'”
style=”font-size:14px;color:red;;background:#D4D0C8″>Webdings</td>\n’);
  document.write(‘<td width=”7%” align=”center”
style=”font-size:14px;color:red;;background:#D4D0C8″>常规</td>\n’);
 }
 for(i=32;i<256;i++)
 {
  if (i%4==0)
  {
   document.write(‘<tr align=”center”>\n’);
  }
  document.write(‘<td align=”center”
style=”font-size:14px;background:#D4D0C8; color:blue; font-family:
fixedsys”><a></a>’+i+’;</td>\n’);
  document.write(‘<td id=”f’+i+'” align=”center”
style=”font-size:14px;background:#FFFFFF; color:#CC5800; font-family:
Webdings”>’+i+’;</td>\n’);
  document.write(‘<td align=”center”
style=”font-size:14px;background:#FFFFFF;font-family: Arial
black”>’+i+’;</td>\n’);

复制代码 代码如下:

  if (i%4==3)
  {
   document.write(‘</tr>\n’);
  }
 }
 document.write(‘</table>\n’);
 </script>

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>滚动变色的文字js特效</title>
</head>
<body>
<div style=”width:736px;”>
请注意下方的文字,部分文字染成红色,且红色循环移动。 <a
href=””
target=”_blank”>原文</a>
</div>
<script type=”text/javascript”>
var message=”欢迎访问柯乐义网,这里有web前端等学习资料。”
var neonbasecolor=”#333333″
var neontextcolor=”#ff0000″
var neontextcolor2 = “#ff3333”
var flashspeed=100
var flashingletters=8
var flashingletters2=2
var flashpause=0
var n=0
if (document.all||document.getElementById){
document.write(‘<font color=”‘+neonbasecolor+'”>’)
for (m=0;m<message.length;m++)
document.write(‘<span
id=”neonlight’+m+'”>’+message.charAt(m)+'</span>’)
document.write(‘</font>’)
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval(“document.all.neonlight”+number) :
document.getElementById(“neonlight”+number)
return crossobj
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n>flashingletters-1)
crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1)
crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout(“beginneon()”,flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval(“neon()”,flashspeed)
}
beginneon()
</script>

 <script language=”JavaScript”>
 function chgFont()
 {
  fontIndex = document.getElementById(“family”).selectedIndex;
  fontValue =
document.getElementById(“family”).options[fontIndex].value;

<div><br /><a href=””
target=”_blank”>keleyi.com</a></div>
</body>
</html>

  for (m=0;m<4;m++)
  {
   eval(‘F’+m+’.innerHTML=”‘+fontValue+'”;’);
  }
  for (n=32;n<256;n++)
  {
   eval(‘f’+n+’.style.fontFamily=”‘+fontValue+'”;’);
  }
 }

您可能感兴趣的文章:

  • js实现鼠标经过表格行变色的方法
  • 纯js和css实现渐变色包括静态渐变和动态渐变
  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色
  • JS小功能(列表页面隔行变色)简单实现
  • jQuery隔行变色与普通JS写法的对比
  • JS关键字变色实现思路及代码
  • 必发365手机版,用JS控制表格的逐行变色的表单
  • JS实现点击复选框将按钮或文本框变为灰色不可用的方法
  • JS实现统计复选框选中个数并提示确定与取消的方法
  • JS实现CheckBox复选框全选全不选功能
  • js实现选中复选框文字变色的方法

 chgFont();
 </script>

</div>
</body>
</html>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website