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 相关文章推荐
jquery 提交值不为空的元素示例代码
May 10 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
JavaScript实现移动端轮播效果
Jun 06 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
基于javascript实现放大镜特效
Dec 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
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
python实现二叉查找树实例代码
2018/02/08 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python制作动态字符图的实例
2019/01/27 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
数控技术应届生求职信
2013/11/13 职场文书
争论的故事教学反思
2014/02/06 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
家庭经济困难证明
2015/06/23 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
优质护理服务心得体会
2016/01/22 职场文书
如何拟写通知正文?
2019/04/02 职场文书
python实现简单倒计时功能
2021/04/21 Python
千万级用户系统SQL调优实战分享
2022/03/03 MySQL