黄锦诚的个人博客--有志者是锦诚!

由标签云引发的random的简单应用

  在一些站点里常常会看到一些标签云的效果,特别是Wordpress本身就自带了这个功能和效果,其实这是一个很有趣的小效果,比齐刷刷的统一的颜色、统一的大小的一排文字排下来好看多了,所以这个小小的东西勾引起了我的兴趣,于是决定折腾一下,弄清楚他的原理。
仔细分析一下,发现Wordpress里的标签云字体的大小是根据标签关联的文章数来决定大小的(如下图),不会因为每次的刷新而改变文字的大小,这个需要与程序的进行数据的记录和读取进行交互了,所以不在本次的讨论之列,本次所在实现的是仅仅前台脚本实现效果。

cloud
扩展分析了一下标签云的效果,觉得实现的思路可以如下:
  1、定义一个或多个不同的数组
  2、数组的自由组合

于是折腾了一下,就有了如下的代码(基于Jquery):

  1. <script type="text/javascript">
  2. function setYX() {
  3.     var color = ["#883335", "#434343", "#FF0000", "Green", "#434343"];
  4.     var size = ["12px", "20px", "16px", "30px"];
  5.     var bgcolor =["#D6FCD6", "", "#FFD3BC", "#FCEDB7"];
  6.     $("#randomText>a").each(function () {
  7.         $(this).css({ "color": color[Math.round(Math.random()*5)], "font-size": size[Math.round(Math.random() * 3+2)], "background-color":bgcolor[Math.round(Math.random() * 4+1)]});
  8.     });
  9. }
  10. window.onload = setYX();
  11. </script>

  实现的效果如图:
cloud1

  效果可以查看演示DEMO,点击打开

简单说明一下:
  分别一个函数“setYS”,定义三个数组,颜色、尺寸、背景色,再加上随机Math.random()的取数组合,其中Math有多个取值的,round(x)为把数四舍五入为最接近的整数,其他的还有正弦、余弦什么的,具体可以查看w3c上的说明,点击查看Math 对象的说明

这个纯粹只是一个效果实现的小摆弄,没有什么技术含量,感谢你的阅读,如果有错漏的地方,欢迎指正。



3条评论

  1. 龙工说道:

    又来拜访了,多多支持你博客!!

  2. 手机美文说道:

    除夕的风儿暖暖的,除夕的焰火艳艳的,除夕的祝福美美的,除夕的夜晚和睦的,除夕就要到了,愿你除夕快乐,身体健康。辛卯年(兔)腊月廿六 2012-1-19



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量