用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面

HTML:（下方有图）

<div class="col-lg-3 tab-content" style="margin-top:40px;min-height:860px;">
<div style="border:1px solid #ddd;margin-bottom:30px;">
<button title="3D旋转" id="style_whirl" type="button" data-type="jplist-grid-view" class="jplist-view jplist-grid-view btn btn-default"><i class="fa fa-th"></i></button>
<button title="平铺" id="style_tile" type="button" data-type="jplist-thumbs-view" class="jplist-view jplist-thumbs-view btn btn-default"><i class="fa fa-reorder"></i></button>
<div class="tagcloud">
<a class="text-primary" href="">全部工单</a> //为全面考虑加一个《全部XX》的标签
<volist name="tags" id="vo">
<a class="text-primary" href="">{$vo}</a> //后台查询所有标签，这里可以利用a标签写点击事件
</volist>
</div>
<div style="height:240px;padding:20px;overflow:auto;" class="tagtile">
<a class="btn btn-outlined btn-primary btn-xs mrm mas" href="">全部工单</a>
<wbr>
<volist name="tags" id="vo">
<wbr>
<a class="btn btn-outlined btn-primary btn-xs mrm mas" href="">{$vo}</a>
</wbr>
</volist>
</wbr>
</div>
</div>
<div>

JS:

var tagstyle = {$tagstyle};
tagcloud({
fontsize: 14, //基本字体大小
radius: 80, //滚动半径
mspeed: "slow", //滚动最大速度
ispeed: "slow", //滚动初速度
direction: 135, //初始滚动方向
keep: true //鼠标移出组件后是否继续随鼠标滚动
});

$("#style_whirl").click(function(){ //样式切换
$(".tagcloud").fadeIn();
$(".tagtile").hide();
})
$("#style_tile").click(function(){
tagstyle = 2;
$(".tagcloud").hide();
$(".tagtile").fadeIn();
})

if(tagstyle == 1){ 判断页面刚进入的样式
$(".tagtile").hide();
}else if(tagstyle == 2){
$(".tagcloud").hide();
}

后台查询太简单，略去。

下面再附上标签配置页面图，我这个页面是利用bootstrap先创建了一个树形结构图，方便查看整体结构。又在右侧以类型为组建立各个标签（按需修改），支持标签排序、添加、修改等。

用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面相关推荐

经典回顾超炫酷阅读效果3D Book使用方法
经典回顾超炫酷阅读效果3D Book使用方法现在有很多人都喜欢在电脑上看小说,而电脑上看小说基本都是以记事本TXT电子书形式阅读,看起来总是觉得没有书本的那种感觉:你是不是已经受够了使用记事本看小说 ...
超炫酷的Markdown渲染阅读工具（附开源地址）
前言写东西的时候使用 Markdown 真的非常的顺滑,但是 Markdown 还需要有一个好编辑工具,大家应该也有自己喜欢和常用的支持 Markdonw 的软件,但是命令行形式的你们有吗? 今天要 ...
html+css+js制作一个超炫酷的雪花特效
❤ 精彩专栏推荐
超炫酷的枪械3D动图，喜欢的不得了！
全世界只有3.14 % 的人关注了爆炸吧知识加拿大安省3D视觉设计师盖瑞斯·福勒制作的枪械动图,直观展示了枪械的工作过程及原理,每次他更新动图都超爱的,喜欢的不得了! ▲枪械动图,连退弹过程都做出 ...
html炫酷在线,程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
6个超炫酷的HTML5电子书翻页动画【转】
6个超炫酷的HTML5电子书翻页动画 WebGL 演示网址:http://bookcase.chromeexperiments.com 相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏 ...
php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...

用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面

用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面相关推荐

最新文章

热门文章