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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
ionic实现底部分享功能
May 11 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
jQuery操作cookie
2016/08/08 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python接口测试文件上传实例解析
2020/05/22 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python实现人工蜂群算法
2020/09/18 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
前台文员的岗位职责
2013/11/14 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014年司机工作总结
2014/11/21 职场文书