当前位置:  编程技术>WEB前端

jquery实现的随机多彩tag标签随机颜色和字号大小效果

    来源: 互联网  发布时间:2014-08-25

    本文导语:  jquery随机多彩tag标签随机颜色和字号大小效果 js代码: 代码如下: $(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); }); }) html代...

jquery随机多彩tag标签随机颜色和字号大小效果

js代码:
代码如下:




$(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);
});
})


html代码:
代码如下:




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{}







效果显示:
 

    
 
 

您可能感兴趣的文章:

  • jQuery窗口大小调整插件 ResizeEnd
  • JQuery获取上传文件大小(示例)
  • jquery判断上传文件类型与限制文件大小
  • jquery更换文章内容与改变字体大小的实现代码
  • jQuery 计算iframe 窗口大小的方法
  • jQuery字体大小切换的实现代码
  • jquery动态调整div大小使其宽度始终为浏览器宽度
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • jquery加载图片自适应大小的代码
  • jQuery动态改变图片显示大小(示例代码)
  • jquery 控制页面字体大小的实例代码
  • jQuery之字体大小的设置方法
  • jquery预览图片实现鼠标放上去显示实际大小
  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
  • JQuery 实时改变网页字体大小的代码
  • jQuery动态改变图片显示大小(修改版)的实现思路及代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery颜色选择器 ExColor
  • jQuery 颜色选择器 mColorPicker
  • jQuery 颜色拾取器 ColorPicker
  • jQuery表格颜色插件 HeatColor
  • jQuery颜色选择器插件 Farbtastic
  • jQuery 颜色插件 JeeGoo Colo
  • jQuery颜色拾取器 jPicker
  • jQuery颜色选择器 iColorPicker
  • jQuery 颜色选择器 Spectrum
  • JQuery 动态改变字体颜色的实现代码 iis7站长之家
  • jQuery 颜色选择插件 evol.colorpicker
  • jquery获取样式中background-color颜色值
  • jquery获取颜色在ie和ff下的区别示例介绍
  • 轻量级 jQuery 颜色选择器 Colpick
  • jquery修改网页背景颜色通过css方法实现
  • JQuery 动态改变字体颜色的实现代码
  • Jquery 表格颜色交替变化,点击选中行,鼠标移过颜色变化的代码分享
  • jquery控制表格奇偶行与活动行颜色
  • 如何用jquery控制表格奇偶行及活动行颜色
  • jquery实现效果比较好的table选中行颜色
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3