JQuery實現動態適時改變字體顏色的方法

2024-05-06 16:16:24

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JQuery實現動態適時改變字體顏色的方法,實例分析了jQuery操作鼠標事件及顏色的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了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>