JQuery实现动态适时改变字体颜色的方法
本文实例讲述了JQuery实现动态适时改变字体颜色的方法。分享给大家供大家参考。具体分析如下：
JQuery动态适时改变字体的颜色，Ajax的效果类似，在文本框输入文字，再选择色块，输入的文字就会变成色块标示的颜色值，很不错的效果吧。如果运行有错，请刷新一次页面即可。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>JQuery动态改变字体颜色</title>
<metacharset="gb2312"/>
<styletype="text/css">
h1{
font:bold15px/19pxGeorgia,serif;
}
p{margin:0;}
#colorselectionsa{
border:2pxsolid#fff;
margin-right:4px;
display:block;
float:left;
}
aimg{
border:1pxsolid#fff;
width:22px;
height:22px;
vertical-align:bottom;
}
#colorselections{zoom:1}
#colorselectionsa.on{
border:2pxsolid#d5680d;
}
#previewer{
margin:26px020px0;
padding:6px;
clear:left;
font:bold19px/25pxVerdana;
border:1pxsolid#ccc;
width:80%;
}
</style>
<scripttype="text/javascript"src="js/jquery1.3.2.js"></script>
<scripttype="text/javascript">
$(function(){
$("#inputText").keyup(function(){
$("#previewer").empty();
$("#previewer").text($(this).attr("value"));
});
});
$(function(){
$("#colorselectionsa").click(function(){
$(this).addClass("on").siblings().removeClass("on");
$("#previewer").css("color",$(this).css("background-color"))
});
});
</script>
</head>
<body>
<h1>请输入文字</h1>
<inputtype="text"id="inputText"value=""/>
<h1>请选择颜色</h1>
<p>
<spanid="colorselections">
<ahref="#"style="background-color:#000000;"class="on">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="Black"/>
</a>
<ahref="#"style="background-color:#003399;"class="">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="LightBlue"/>
</a>
<ahref="#"style="background-color:#5E5E5E;"class="">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="MediumGray"/>
</a>
<ahref="#"style="background-color:#00524E;"class="">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="DarkTeal"/>
</a>
<ahref="#"style="background-color:#258B86;"class="">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="LightTeal"/>
</a>
<ahref="#"style="background-color:#DA7E33;"class="">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="Orange"/></a>
<ahref="#"style="background-color:#198541;"class="">
<imgsrc="/jscss/demoimg/201006/space.gif"class="colorbox"alt="Green"/>
</a>
</span>
</p>
<brclear="both"/>
<pid="previewer"></p>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。