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程序设计有所帮助。