网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

我的js云标签实例

关注我吧
 2013/4/25 11:10:29 阅读次数:3071

我的js云标签实例

本站所引用的固定标签云实例,在这里分享给大家。

该标签云的实现主要是从两方面着手:

1、随机颜色 方法延伸js获取随机颜色

function GetColor()
{
	var r = Math.floor(Math.random() * 255).toString(16);
	var g = Math.floor(Math.random() * 255).toString(16);
	var b = Math.floor(Math.random() * 255).toString(16);
	r = r.length == 1 ? "0" + r : r;
	g = g.length == 1 ? "0" + g : g;
	b = b.length == 1 ? "0" + b : b;
	return "#" + r + g + b;
}

2、随机字体大小(本文固定几个字体大小随机显示)

[0.8,0.9,1,1.5,0.8,0.9,1][Math.floor(Math.random()*7)]//是0--6之间随机显示大小,当然你可以根据你的喜好来调。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的云标签实例-幸凡学习网</title>
<style>
.tagCloud{width:280px;margin:0 auto;}
.tagCloud i {border-left: 1px solid #EEEEEE;display: inline-block;font-size: 0;margin: 0 5px;width: 1px;}
.tagCloud a {line-height: 15px;text-decoration: none;}
</style>
</head>

<body>
<div class="tagCloud" id="tagCloud"><h2 class="rh2">热门标签</h2><div id="ctl00_ContentPlaceHolder1_could_div"><a href="s.aspx?tag=3dsmax">3dsmax</a><i></i><a href="s.aspx?tag=blend3">blend3</a><i></i><a href="s.aspx?tag=ckeditor">ckeditor</a><i></i><a href="s.aspx?tag=css">css</a><i></i><a href="s.aspx?tag=finder">finder</a><i></i><a href="s.aspx?tag=iframe">iframe</a><i></i><a href="s.aspx?tag=js">js</a><i></i><a href="s.aspx?tag=js控制">js控制</a><i></i><a href="s.aspx?tag=js正则">js正则</a><i></i><a href="s.aspx?tag=kindeditor">kindeditor</a><i></i><a href="s.aspx?tag=LazyLoad">LazyLoad</a><i></i><a href="s.aspx?tag=net">net</a><i></i><a href="s.aspx?tag=Perl风格">Perl风格</a><i></i><a href="s.aspx?tag=ps">ps</a><i></i><a href="s.aspx?tag=RegExp">RegExp</a><i></i><a href="s.aspx?tag=repeater">repeater</a><i></i><a href="s.aspx?tag=SEO">SEO</a><i></i><a href="s.aspx?tag=Silverlight">Silverlight</a><i></i><a href="s.aspx?tag=swfupload">swfupload</a><i></i><a href="s.aspx?tag=tab切换">tab切换</a><i></i><a href="s.aspx?tag=XML">XML</a><i></i><a href="s.aspx?tag=奥特加">奥特加</a><i></i><a href="s.aspx?tag=编辑器">编辑器</a><i></i><a href="s.aspx?tag=标签">标签</a><i></i><a href="s.aspx?tag=博客">博客</a><i></i><a href="s.aspx?tag=参考">参考</a><i></i><a href="s.aspx?tag=成功">成功</a><i></i><a href="s.aspx?tag=承受">承受</a><i></i><a href="s.aspx?tag=错位">错位</a><i></i><a href="s.aspx?tag=代码">代码</a><i></i><a href="s.aspx?tag=代码运行">代码运行</a><i></i><a href="s.aspx?tag=弹出窗口">弹出窗口</a><i></i><a href="s.aspx?tag=调用">调用</a><i></i><a href="s.aspx?tag=动画设计">动画设计</a><i></i><a href="s.aspx?tag=多tab">多tab</a><i></i><a href="s.aspx?tag=分页">分页</a><i></i><a href="s.aspx?tag=浮动">浮动</a><i></i><a href="s.aspx?tag=赋值">赋值</a><i></i><a href="s.aspx?tag=加载效果">加载效果</a><i></i><a href="s.aspx?tag=兼容">兼容</a><i></i><a href="s.aspx?tag=教程">教程</a><i></i><a href="s.aspx?tag=开水">开水</a><i></i><a href="s.aspx?tag=坎">坎</a><i></i><a href="s.aspx?tag=可添加删除">可添加删除</a><i></i><a href="s.aspx?tag=控制">控制</a><i></i><a href="s.aspx?tag=链接">链接</a><i></i><a href="s.aspx?tag=美文">美文</a><i></i><a href="s.aspx?tag=免费收录">免费收录</a><i></i><a href="s.aspx?tag=批量上传">批量上传</a><i></i><a href="s.aspx?tag=评论">评论</a><i></i><a href="s.aspx?tag=牵挂">牵挂</a><i></i><a href="s.aspx?tag=潜力">潜力</a><i></i><a href="s.aspx?tag=情绪">情绪</a><i></i><a href="s.aspx?tag=全屏">全屏</a><i></i><a href="s.aspx?tag=上传功能">上传功能</a><i></i><a href="s.aspx?tag=上下滚动">上下滚动</a><i></i><a href="s.aspx?tag=鼠标事件">鼠标事件</a><i></i><a href="s.aspx?tag=数学">数学</a><i></i><a href="s.aspx?tag=思念">思念</a><i></i><a href="s.aspx?tag=搜索引擎">搜索引擎</a><i></i><a href="s.aspx?tag=缩小放大">缩小放大</a><i></i><a href="s.aspx?tag=图片">图片</a><i></i><a href="s.aspx?tag=退出">退出</a><i></i><a href="s.aspx?tag=网络营销">网络营销</a><i></i><a href="s.aspx?tag=温馨">温馨</a><i></i><a href="s.aspx?tag=文字特效">文字特效</a><i></i><a href="s.aspx?tag=稳定">稳定</a><i></i><a href="s.aspx?tag=西班牙">西班牙</a><i></i><a href="s.aspx?tag=显示节点">显示节点</a><i></i><a href="s.aspx?tag=延迟加载">延迟加载</a><i></i><a href="s.aspx?tag=样式名称">样式名称</a><i></i><a href="s.aspx?tag=用豆号分节">用豆号分节</a><i></i><a href="s.aspx?tag=用户">用户</a><i></i><a href="s.aspx?tag=游戏">游戏</a><i></i><a href="s.aspx?tag=遮罩层">遮罩层</a><i></i><a href="s.aspx?tag=智慧">智慧</a><i></i><a href="s.aspx?tag=子父窗口">子父窗口</a><i></i><a href="s.aspx?tag=自动切换">自动切换</a><i></i><a href="s.aspx?tag=自动上传">自动上传</a><i></i><a href="s.aspx?tag=左右滚动">左右滚动</a><i></i></div></div>
</body>
<script type="text/javascript">
function $2(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId);// W3C DOM
    } else if (document.all && document.all(objectId)) {
        return document.all(objectId);// MSIE 4 DOM
    } else if (document.layers && document.layers[objectId]) {
        return document.layers[objectId];// NN 4 DOM.. note: this won''t find nested layers
    } else {
        return false;
    }
}
function GetColor()
{
	var r = Math.floor(Math.random() * 255).toString(16);
	var g = Math.floor(Math.random() * 255).toString(16);
	var b = Math.floor(Math.random() * 255).toString(16);
	r = r.length == 1 ? "0" + r : r;
	g = g.length == 1 ? "0" + g : g;
	b = b.length == 1 ? "0" + b : b;
	return "#" + r + g + b;
}
 function setTagCloudStyle(){
     if($2("tagCloud"))
     {
          var tagLinks = $2("tagCloud").getElementsByTagName("a");
          var tagLinksLen = tagLinks.length;
          
          for(i = 0 ; i < tagLinksLen ; i++){
			//[1,1.2,1.4,1.6,1.8,2,2.4][a]  //这里的a就是随机生成的数字,当然只能是0--6之间,因此
           tagLinks[i].style.fontSize=[0.8,0.9,1,1.5,0.8,0.9,1][Math.floor(Math.random()*7)]+''em'';
		   var std=GetColor();
           tagLinks[i].style.color=std;
          }
      }
 }
 setTagCloudStyle();
</script>
</html>

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭