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


Posted in Javascript onMarch 10, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
Jquery 效果使用详解
Nov 23 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
JS实现简单日历特效
Jan 03 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 #Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 #Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 #Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 #Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 #Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 #Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 #Javascript
You might like
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php简单复制文件的方法
2016/05/09 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python读取Excel实例详解
2018/08/17 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
五一家具促销方案
2014/01/10 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
企业精神口号
2014/06/11 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大学生支教感言
2015/08/01 职场文书