| 标题 | JQuery实现动态适时改变字体颜色的方法 |
| 范文 | 这篇文章主要介绍了JQuery实现动态适时改变字体颜色的方法,实例分析了jQuery操作鼠标事件及颜色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JQuery实现动态适时改变字体颜色的方法。分享给大家供大家参考。具体分析如下： JQuery动态适时改变字体的颜色，Ajax的效果类似，在文本框输入文字，再选择色块，输入的文字就会变成色块标示的颜色值，很不错的效果吧。如果运行有错，请刷新一次页面即可。 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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="#"> <img src="/jscss/demoimg/201006/space.gif" /> </a> <a href="#"> <img src="/jscss/demoimg/201006/space.gif" /> </a> <a href="#"> <img src="/jscss/demoimg/201006/space.gif" /> </a> <a href="#"> <img src="/jscss/demoimg/201006/space.gif" /> </a> <a href="#"> <img src="/jscss/demoimg/201006/space.gif" /> </a> <a href="#"> <img src="/jscss/demoimg/201006/space.gif" /></a> <a href="#"> <img src="/jscss/demoimg/201006/space.gif" /> </a> </span> </p> <br clear="both" /> <p id="previewer"></p> </body> </html> 希望本文所述对大家的jQuery程序设计有所帮助。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。