标签云

最新推荐文章于 2023-10-03 20:00:51 发布

#面向百度编程

最新推荐文章于 2023-10-03 20:00:51 发布

阅读量613

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_44162239/article/details/109521622

版权

笔记专栏收录该内容

30 篇文章

订阅专栏

一、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.youkuaiyun.com"},
        {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>