一、jQCloud
js文件:https://www.oschina.net/p/jqcloud?hmsr=aladdin1e1
CSS属性:
writing-mode:
writing-mode属性 最初只是ie中的属性,只有ie支持,现在在css3中谷歌,火狐也开始支持。
所以使用的时候就需要记住两套不同的语法,ie的私有属性和css3的规范属性
css3:
writing-mode:horizontal-tb;//默认:水平方向,从上到下
writing-mode: vertical-rl;//垂直方向,从右向左
writing-mode: vertical-lr;//垂直方向,从左向右
ie私有属性:
writing-mode: lr-tb ;//从左到右,从上到下。默认
writing-mode: tb-rl;//从上到下,从右向左
writing-mode:tb-lr (IE8+);//水平方向,从上到下,从左到右
-moz-, -webkit-, -o-这些都是浏览器前缀:
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
<!DOCTYPE html>
<html>
<head>
<title> 标签云 </title>
<link rel="stylesheet" type="text/css" href="js/jQCloud-master/dist/jqcloud.css" />
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/jQCloud-master/dist/jqcloud.js"></script>
<style>
#example .word{color: #FF0000}
#example .abc{
-webkit-writing-mode: vertical-rl;
writing-mode: tb-rl;}
</style>
</head>
<body>
<div id="example" style="width: 550px; height: 350px;"></div>
</body>
</html>
<script type="text/javascript">
/*
text:文字
weight:大小
handlers:点击事件
link:跳转链接
html:HTML属性(class style等)
*/
var word_array = [
{text: "php", weight: 30,handlers:{click:function(){alert("Lorem")}}},
{text: "python", weight: 9, link: "https://blog.csdn.net"},
{text: "颜色", weight: 10, html: { "class" : "word" } },
{text: "垂直从上到下", weight: 7, html: { "class" : "abc" } },
{text: "C++", weight: 5},
{text: "Go", weight: 10},
{text: "html", weight: 20},
{text: "Java", weight: 15}
];
$(function() {
$("#example").jQCloud(word_array);
});
</script>
二、tagcloud(会转)
js文件:
https://gitee.com/619115125/tagCloud
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>标签云</title>
<script type="text/javascript" src="js/tagcloud.js"></script>
<style type="text/css">
.wrapper{ width: 1200px; height: 300px; margin: 120px auto; }
.tagcloud a{ display: block; padding: 11px 30px; color: #333; font-size: 16px; border: 1px solid #e6e7e8; border-radius: 18px;
background-color: #f2f4f8; text-decoration: none; white-space: nowrap;
-o-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-ms-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-moz-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-webkit-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";/*兼容ie7/8*/
}
.tagcloud a:hover{ color: #3385cf; }
</style>
</head>
<body>
<div class="wrapper">
<div class="tagcloud fl">
<a href="#">PHP</a>
<a href="#">JAVA</a>
<a href="#">Python</a>
<a href="#">C</a>
<a href="#">C++</a>
<a href="#">C#</a>
<a href="#">HTML</a>
<a href="#">JS</a>
</div>
</div><!--wrapper-->
<script type="text/javascript">
/*3D标签云*/
tagcloud({
selector: ".tagcloud", //元素选择器
fontsize: 16, //字体大小, px
radius: 100, //滚动半径, px
mspeed: "normal", //滚动最大速度, slow, normal(默认), fast
ispeed: "normal", //滚动初速度, slow, normal(默认), fast
direction: 130, //初始滚动方向, 取值角度(顺时针360): 0:往12点方向滚动, 90:往3点方向滚动, 默认:135
keep: false //鼠标移出组件后是否继续随鼠标滚动, false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
});
</script>
</body>
</html>