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程序设计有所帮助。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17