jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果
更新時(shí)間：2014年03月27日 11:23:07 作者：
這篇文章主要介紹了jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果,需要的朋友可以參考下
jquery隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果
js代碼：
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var tags_a = $("#tags a");
tags_a.each(function(){
var x = 9;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tags"+rand);
});
})
</script>
html代碼：
<html>
<head>
<style>
body,a{ font-size:13px;}
a{ color:#333333; text-decoration:none;}
.taglist{ width:250px;overflow:hidden;border:#dddddd solid 1px;}
.taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;}
.taglist .tit a{ padding-left:8px; color:#ffffff;}
#tags a{height:26px; line-height:26px;padding-right:6px;}
#tags .tags0{}
#tags .tags1{color:#C00; font-size:24px;}
#tags .tags2{color:#030; font-size:16px;}
#tags .tags3{color:#00F;}
#tags .tags4{ font-size:16px;}
#tags .tags5{color:#C00; font-size:20px;}
#tags .tags6{color:#F06 font-size:20px;}
#tags .tags7{color:#030; font-weight:bold; font-size:18px;}
#tags .tags8{color:#F06; font-weight:bold;}
#tags .tags9{color:#C00; font-weight:bold;font-size:16px;}
#tags a:hover{ color:#F00; text-decoration:underline;}
.w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;}
.taglist .w95{}
</style>
</head>
<body>
<div class="taglist">
<div class="tit"><a href="#">TAG標(biāo)簽</a></div>
<div class="w95" id="tags">
<a >導(dǎo)航菜單</a>
<a >焦點(diǎn)幻燈片</a>
<a >廣告代碼</a>
<a >網(wǎng)頁(yè)特效</a>
<a >jquery 特效</a>
<a >滾動(dòng)代碼</a>
<a >查看源碼</a>
<a >IE7變慢</a>
<a >ET2.0采集</a>
<a >CSS</a>
<a >moss2007</a>
<a >MOSS母版頁(yè)</a>
<a >JS+CSS幻燈片</a>
<a >網(wǎng)頁(yè)源碼</a>
<a >網(wǎng)頁(yè)配色</a>
<a >301重定向</a>
<a >JS+CSS列表</a>
<a >隨機(jī)數(shù)</a>
<a >下拉菜單</a>
</div>
</div>
</body>
</html>
效果顯示：
js代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var tags_a = $("#tags a");
tags_a.each(function(){
var x = 9;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tags"+rand);
});
})
</script>
html代碼：
復(fù)制代碼 代碼如下:
<html>
<head>
<style>
body,a{ font-size:13px;}
a{ color:#333333; text-decoration:none;}
.taglist{ width:250px;overflow:hidden;border:#dddddd solid 1px;}
.taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;}
.taglist .tit a{ padding-left:8px; color:#ffffff;}
#tags a{height:26px; line-height:26px;padding-right:6px;}
#tags .tags0{}
#tags .tags1{color:#C00; font-size:24px;}
#tags .tags2{color:#030; font-size:16px;}
#tags .tags3{color:#00F;}
#tags .tags4{ font-size:16px;}
#tags .tags5{color:#C00; font-size:20px;}
#tags .tags6{color:#F06 font-size:20px;}
#tags .tags7{color:#030; font-weight:bold; font-size:18px;}
#tags .tags8{color:#F06; font-weight:bold;}
#tags .tags9{color:#C00; font-weight:bold;font-size:16px;}
#tags a:hover{ color:#F00; text-decoration:underline;}
.w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;}
.taglist .w95{}
</style>
</head>
<body>
<div class="taglist">
<div class="tit"><a href="#">TAG標(biāo)簽</a></div>
<div class="w95" id="tags">
<a >導(dǎo)航菜單</a>
<a >焦點(diǎn)幻燈片</a>
<a >廣告代碼</a>
<a >網(wǎng)頁(yè)特效</a>
<a >jquery 特效</a>
<a >滾動(dòng)代碼</a>
<a >查看源碼</a>
<a >IE7變慢</a>
<a >ET2.0采集</a>
<a >CSS</a>
<a >moss2007</a>
<a >MOSS母版頁(yè)</a>
<a >JS+CSS幻燈片</a>
<a >網(wǎng)頁(yè)源碼</a>
<a >網(wǎng)頁(yè)配色</a>
<a >301重定向</a>
<a >JS+CSS列表</a>
<a >隨機(jī)數(shù)</a>
<a >下拉菜單</a>
</div>
</div>
</body>
</html>
效果顯示：
您可能感興趣的文章:
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
- jQuery與js實(shí)現(xiàn)顏色漸變的方法
- jQuery實(shí)現(xiàn)的文字hover顏色漸變效果實(shí)例
- jquery實(shí)現(xiàn)實(shí)時(shí)改變網(wǎng)頁(yè)字體大小、字體背景色和顏色的方法
- JQuery實(shí)現(xiàn)動(dòng)態(tài)適時(shí)改變字體顏色的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法
- jQuery獲取樣式中顏色值的方法
- jQuery獲取隨機(jī)顏色的實(shí)例代碼
相關(guān)文章
jQuery 定時(shí)局部刷新(setInterval)
jQuery 定時(shí)局部刷新(setInterval),這里是顯示時(shí)間的效果代碼。2010-11-11
ff下JQuery無(wú)法監(jiān)聽(tīng)input的keyup事件的解決方法
這篇文章主要介紹了ff下JQuery無(wú)法監(jiān)聽(tīng)input的keyup事件的解決方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)改變css樣式的方法,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這幾天玩兒著2048這個(gè)游戲，突然心血來(lái)潮想練習(xí)下寫(xiě)程序的思路，于是乎就模仿做了一個(gè)，到目前位置還沒(méi)有實(shí)現(xiàn)動(dòng)態(tài)移動(dòng)，不是很好看，不過(guò)玩兒著自己模仿的小游戲還是蠻爽的，哈哈2015-03-03
jQuery.form.js插件不能解決連接超時(shí)(timeout)的原因分析及解決方法
jQuery.form.js是一個(gè)form插件，支持ajax表單提交和ajax文件上傳。最近在使用jquery.form.js提交包含文件的表單時(shí)，當(dāng)碰上網(wǎng)速較慢時(shí)，而我們又設(shè)置了timeout時(shí)我們的頁(yè)面會(huì)死在這里，怎么回事呢，下面腳本之家小編給大家解答下2016-10-10
jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)調(diào)整字體大小的方法,涉及jQuery針對(duì)頁(yè)面屬性與樣式動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
本文是對(duì)Jquery中AJAX POST與GET之間的區(qū)別。進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了使用js顯示當(dāng)前時(shí)間示例,這里也用到了jquery，讓得把它也要引入到頁(yè)面中2014-03-03
今天所要分享的控件是單選按鈕，一個(gè)基于jquery擴(kuò)展漂亮的單選按鈕——RadioButton，喜歡的朋友可以收藏下2013-11-11