让每一名学员高薪就业
返回列表 发新帖

标签云效果的制作

[复制链接]

55

主题

89

帖子

1241

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1241

版主

发表于 2018-1-11 14:57:39  | 显示全部楼层 | 阅读模式
本帖最后由 萤火虫 于 2018-1-11 15:02 编辑

今天我们来实现标签云的效果制作,效果如下图所示:
页面打开后的效果:
1.png
再次刷新页面后的效果下:
2.png

3.png

从上面的效果图可以看出来标签云效果的原理很简单:就是为每个链接书写不同的样式(此处是为不同的链接设置不同的字体大小)。
接下来我们就开始来实现,布局很简单,总体上分为上下两个部分,上面是标题,下面是一些a标签。首先实现页面的布局,html结构代码如下:
  1. <!--最外层的大盒子-->
  2.       <div class="outbox">
  3. <!--标题-->
  4.       <h2>我们的UI课程 <span style="color:#3366cc;">按下F5再试试</span></h2>
  5.       <!--标签列表-->
  6.       <div class="taglist" id="tags">
  7.           <a target="_blank" href="http://www.itsource.cn/">PhotoShop</a>
  8.           <a target="_blank" href="http://www.itsource.cn/">AI</a>
  9.           <a target="_blank" href="http://www.itsource.cn/">AN</a>
  10.           <a target="_blank" href="http://www.itsource.cn">移动端设计</a>
  11.           <a target="_blank" href="http://www.itsource.cn">HTML</a>
  12.           <a target="_blank" href="http://www.itsource.cn/">CSS</a>
  13.           <a target="_blank" href="http://www.itsource.cn/">javascript</a>
  14.           <a target="_blank" href="http://www.itsource.cn/">jQuery</a>
  15.      </div></div>
复制代码
Css样式代码如下:
  1. <style type="text/css">
  2.             * { margin: 0; padding: 0; }
  3.             body { font: 12px/180% Arial, Helvetica, sans-serif, "宋体"; }
  4.             /*最外层的大盒子*/
  5.             .outbox { background: #FFF8DE; border: solid 1px #ff6600; width: 380px; margin: 20px auto; }
  6.             /*上面的标题*/
  7.             .outbox h2 { font-size: 18px; height: 32px; padding: 10px 0 0 20px; font-family: "微软雅黑", "宋体"; border-bottom: solid 1px #ff6600; }
  8.              /*标题中的span标签*/
  9.              h2 span{ color: #3366cc; }
  10.              /*下面的大盒子*/
  11.              .taglist { padding: 20px 20px 30px 20px; }
  12.              /*a标签的样式*/
  13.             .taglist a { padding: 3px; display: inline-block; white-space: nowrap; }
  14.    </style>
复制代码
初始的效果如下图:
4.png
接下来javascript实现为每个a标签设置不同的字号,代码如下:
  1. <script type="text/javascript">
  2.          window.onload = function(){
  3.                   //得到所有的a标签
  4.                   var as= document.getElementById("tags").getElementsByTagName("a");
  5.                  console.log(as);
  6.                  //使用for循环为每个a标签设置不同的字号
  7.                  for(var i=0;i<as.length;i++){
  8.                                    //随机生成字号
  9.                                    var fsize = parseInt(Math.random()*30);
  10.                                    console.log(fsize);
  11.                                    as[i].style.fontSize = fsize+"px";
  12.                                 }
  13.                         }
复制代码
运行后效果如下图:
5.png

到此我们的标签云效果就实现完毕了,大家可以在此基础上进一步的进行扩展,比如为每个标签设置不一样的背景。

本文为源码时代H5老师原创,转载请标明出处(www.itsource.cn

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表