jQuery简单实现彩色云标签效果示例


Posted in Javascript onAugust 01, 2016

本文实例讲述了jQuery简单实现彩色云标签效果的方法。分享给大家供大家参考,具体如下:

一、JS Code:

<script type="text/javascript">
$(function () {
  randomCloudLabel();
});
function randomCloudLabel() {
  var obj = $("#CloudLabel a");
  function rand(num) {
    return parseInt(Math.random() * num + 1);
  }
  function randomcolor() {
    var str = Math.ceil(Math.random() * 16777215).toString(16);
    if (str.length < 6) {
      str = "0" + str;
    }
    return str;
  }
  for (len = obj.length, i = len; i--; ) {
    obj[i].style.left = rand(600) + "px";
    obj[i].style.top = rand(400) + "px";
    obj[i].className = "color" + rand(5);
    obj[i].style.zIndex = rand(5);
    obj[i].style.fontSize = rand(50) + 12 + "px";
    obj[i].style.color = "#" + randomcolor();
  }
}
</script>

二、Html Code:

<div id="CloudLabel">
  <a href="#">web标准学习</a><a href="#">css</a> <a href="#">javascript</a><a href="#">html5</a>
  <a href="#">canvas</a><a href="#">video</a> <a href="#">audio</a><a href="#">jQuery</a>
  <a href="#">jQuerymobile</a><a href="#">flash</a> <a href="#">firefox</a><a href="#">chrome</a>
  <a href="#">opera</a><a href="#">IE9</a> <a href="#">css3.0</a><a href="#">andriod</a>
  <a href="#">apple</a><a href="#">google</a><a href="#">jobs</a>
</div>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
node.js实现上传文件功能
Jul 15 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 #Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 #Javascript
JavaScript中的对象继承关系
Aug 01 #Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 #Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 #Javascript
jQuery简单实现title提示效果示例
Aug 01 #Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
php xml文件操作实现代码(二)
2009/03/20 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Python3 中文文件读写方法
2018/01/23 Python
python顺序执行多个py文件的方法
2019/06/29 Python
通过python检测字符串的字母
2020/02/18 Python
python Shapely使用指南详解
2020/02/18 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
金融管理专业毕业生求职信
2014/03/12 职场文书
新春寄语大全
2014/04/09 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
户籍证明模板
2014/09/28 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
个性与发展自我评价
2015/03/06 职场文书
培训通知书模板
2015/04/17 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python