手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery简单实现彩色云标签效果示例
jQuery简单实现彩色云标签效果示例
摘要:本文实例讲述了jQuery简单实现彩色云标签效果的方法。分享给大家供大家参考,具体如下:一、JSCode:$(function(){rand...

本文实例讲述了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程序设计有所帮助。

【jQuery简单实现彩色云标签效果示例】相关文章:

jQuery实现表格行上下移动和置顶效果

jQuery实现在列表的首行添加数据

jQuery实现将页面上HTML标签换成另外标签的方法

jQuery实现转动随机数抽奖效果的方法

js实现顶部可折叠的菜单工具栏效果实例

一个很简单的办法实现TD的加亮效果.

jQuery插件pagewalkthrough实现引导页效果

基于jQuery插件实现环形图标菜单旋转切换特效

jQuery结合ajax实现动态加载文本内容

jQuery实现的多屏图像图层切换效果实例

精品推荐
分类导航