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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
js实现模拟购物商城案例
May 18 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
PHP 中的批处理的实现
2007/06/14 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP基本语法总结
2014/09/06 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP中phar包的使用教程
2017/06/14 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
JavaScript实现拖拽功能
2020/02/11 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
破解安装Pycharm的方法
2018/10/19 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
三下乡活动方案
2014/01/31 职场文书
视光学专业自荐信
2014/06/24 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书