JS彩色气泡文字标签云模板代码

特效代码 潘老师 3个月前 (12-10) 55 ℃ (0) 扫码查看



JS彩色气泡文字标签云模板代码是一款一团彩色气泡悬浮的文字标签云,基于js、html、css来实现的,动态滚动效果很棒。

效果

核心代码

<div class="wrapper">
    <div class="tagcloud">
      <!-- bo大小 co颜色 -->
      <a class="b01 co01" href="#">TaoBao</a>
      <a class="b02 co02" href="#">Suning</a>
      <a class="b03 co05" href="#">Juhuasuan</a>
      <a class="b04 co02" href="#">Today</a>
      <a class="b03 co05" href="#">NetEase</a>
      <a class="b02 co06" href="#">Fallow fish</a>
      <a class="b03 co07" href="#">Tmall</a>
      <a class="b04 co01" href="#">Dangdang</a>
      <a class="b03 co02" href="#">Net No. 1</a>
      <a class="b04 co03" href="#">Mogujie</a>
      <a class="b03 co04" href="#">Where</a>
      <a class="b04 co05" href="#">Booking</a>
      <a class="b04 co06" href="#">Train </a>
      <a class="b02 co07" href="#">Hornet's</a>
      <a class="b03 co01" href="#">bubble</a>
      <a class="b04 co02" href="#">bubble</a>
      <a class="b01 co01" href="#">bubble</a>
      <a class="b03 co06" href="#">bubble</a>
      <a class="b03 co05" href="#">bubble</a>
      <a class="b04 co06" href="#">bubble</a>
    </div>
</div><!--wrapper-->

<script type="text/javascript">
    /*3D标签云*/
    tagcloud({
        selector: ".tagcloud",  //元素选择器
        fontsize: 16,       //基本字体大小, 单位px
        radius: 140,         //滚动半径, 单位px 页面宽度和高度的五分之一
        mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
        ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
        direction: 135,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
        keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    });
</script>

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

资源下载


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/project/tx/12352.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】