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学习笔记(七) js函数介绍
Jun 19 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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 include和require的区别深入解析
2013/06/17 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python搭建虚拟环境的步骤详解
2016/09/27 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python3转换code128条形码的方法
2019/04/17 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
普罗米修斯教学反思
2014/02/06 职场文书
工作过失检讨书
2014/02/23 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书