当前位置：网站综合首页 >> 网页JS特效 >> 文本特效类 >> 网页设计中动态更改字符的颜色特效

网页设计中动态更改字符的颜色特效

来源：中国设计秀作者：佚名点击：135 加入收藏发表评论

顶一下

关键字：网页字符特效

代码如下,点击运行可查看效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Dynamic Update</title>

<h1>输入字符</h1>
<p>
 <input
  type="text"
  id="inputText"
  name="inputText"
  value="Sample Text to Type" />
</p>
<h1 style="margin-top:16px;">Choose a color</h1>
<p>
<span id="colorselections"> 
 <a href="#" style="background-color:#000000;" class="on">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Black" />
 </a>
 <a href="#" style="background-color:#003399;" class="">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Light Blue" />
 </a>
 <a href="#" style="background-color:#5E5E5E;" class="">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Medium Gray" />
 </a>
 <a href="#" style="background-color:#00524E;" class="">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Dark Teal" />
 </a>
 <a href="#" style="background-color:#258B86;" class="">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Light Teal" />
 </a>
 <a href="#" style="background-color:#DA7E33;" class="">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Orange" /></a>
 <a href="#" style="background-color:#198541;" class="">
  <img src="/uploadfile/site/uploadfile/200806/20080621105533600.gif" class="colorbox" alt="Green" />
 </a>
</span>
</p>
<br clear="all" />
<p id="previewer" style="color:#000000;">Sample Text to Type</p>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2008-06-26 00:53:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/site/html/article_2350.html

热点文章/相关文章