JQuery实现动态适时改变字体颜色的方法

时间：2021-01-13 09:50:04|栏目：jquery|点击：次

本文实例讲述了JQuery实现动态适时改变字体颜色的方法。分享给大家供大家参考。具体分析如下：

JQuery动态适时改变字体的颜色，Ajax的效果类似，在文本框输入文字，再选择色块，输入的文字就会变成色块标示的颜色值，很不错的效果吧。如果运行有错，请刷新一次页面即可。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3c.org/1999/xhtml">
 
 <head>
 
 <title>JQuery动态改变字体颜色</title>
 
 <meta charset="gb2312" />
 
 <style type="text/css">
 
 h1 {
 
     font:bold 15px/19px Georgia, serif;
 
     }
 
 p {margin:0;}
 
 #colorselections a {
 
     border:2px solid #fff;
 
     margin-right:4px;
 
     display:block;
 
     float:left;
 
     }
 
 a img {
 
     border:1px solid #fff;
 
     width:22px;
 
     height:22px;
 
     vertical-align:bottom;
 
     }
 
 #colorselections{zoom:1}    
 
 #colorselections a.on {
 
     border:2px solid #d5680d;
 
     }
 
 #previewer {
 
     margin:26px 0 20px 0;
 
     padding:6px;
 
     clear:left;
 
     font:bold 19px/25px Verdana;
 
     border:1px solid #ccc;
 
     width:80%;
 
     }
 
 </style>
 
 <script type="text/javascript" src="js/jquery1.3.2.js"></script>
 
 <script type="text/javascript">
 
 $(function(){
 
     $("#inputText").keyup(function(){
 
         $("#previewer").empty();
 
         $("#previewer").text($(this).attr("value"));
 
     });
 
 });
 
 $(function(){
 
     $("#colorselections a").click(function(){
 
         $(this).addClass("on").siblings().removeClass("on");
 
         $("#previewer").css("color",$(this).css("background-color"))
 
     });
 
 });
 
 </script>
 
 </head>
 
 <body>
 
 <h1>请输入文字</h1>
 
 <input type="text" id="inputText" value="" />
 
 <h1>请选择颜色</h1>
 
 <p>
 
 <span id="colorselections"> 
 
     <a href="#" style="background-color:#000000;" class="on">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Black" />
 
     </a>
 
     <a href="#" style="background-color:#003399;" class="">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Light Blue" />
 
     </a>
 
     <a href="#" style="background-color:#5E5E5E;" class="">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Medium Gray" />
 
     </a>
 
     <a href="#" style="background-color:#00524E;" class="">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Dark Teal" />
 
     </a>
 
     <a href="#" style="background-color:#258B86;" class="">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Light Teal" />
 
     </a>
 
     <a href="#" style="background-color:#DA7E33;" class="">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Orange" /></a>
 
     <a href="#" style="background-color:#198541;" class="">
 
     <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Green" />
 
     </a>
 
 </span>
 
 </p>
 
 <br clear="both" />
 
 <p id="previewer"></p>
 
 </body>
 
 </html>

希望本文所述对大家的jQuery程序设计有所帮助。

上一篇：简单介绍jsonp 使用小结

栏目：jquery

下一篇：jQuery简单获取DIV和A标签元素位置的方法

本文标题：JQuery实现动态适时改变字体颜色的方法

本文地址：http://www.codeinn.net/misctech/44397.html

更多jquery

jquery

JQuery实现动态适时改变字体颜色的方法

阅读排行

推荐教程