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 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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
destoon各类调用汇总
2014/06/20 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
Python安装Bs4的多种方法
2020/11/28 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
低碳环保倡议书
2014/04/14 职场文书
优秀护士先进事迹
2014/05/08 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
教师业务学习材料
2014/12/16 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
正规欠条模板
2015/07/03 职场文书
情况说明书格式及范文
2019/06/24 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
golang连接MySQl使用sqlx库
2022/04/14 Golang