XC的博客
xcshare.site

typecho 3D标签云的调用,非插件Svg3dTagCloud

Author:

xc

©

Wordage:

共计 7135 字

needs:

约 1 分钟

Popular:

233 ℃

Created:

目 录

概述

 这两天在折腾博客,用到3D标签云,但是网上找了一大圈,不是残缺的就是里面代码有错误,可能适用发布者的页面,像我这种只会复制和粘贴的人,拿来用不上。
网上的那个插件,也是,使用的时候,定义DIV的ID调用,但就是不生效,不知道原因所在。
最终,东拼西凑的总算搞定了,所以总结分享一下。
tag_20221020170622.jpg
 旋转效果看本网站
特效确实牛,都是前辈大佬们搞出来的Svg3dTagCloud,我们只是拿来简单的调用而已。

正文:

 最简单的方案:(只想复制和粘贴)


 <div  style="width:100%;display:flex;align-items: center;max-height: 350px;">
            <?php
          function random_color(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return '##'.$c;
}
?>
<style type="text/css">
      /*3D标签云*/
  ##tag_cloud_widget>div {

width:250px;
height:250px;

}
##tag_cloud_widget>div>a {
    position: absolute;
}

##tag_cloud_widget>div>a:hover {
    display: block
    </style>
    <script type="text/javascript" src="https://xcshare.site/S3dtag.js"></script>
        <div id="tag_cloud_widget">
            <div class="items">
<?php $this->widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&limit=24')->to($tags); ?>
<?php while($tags->next()): ?>
        <a class="s3dtag" href="<?php $tags->permalink(); ?>" title="1 篇文章" style="left: 0px; top: 9.59126px; z-index: 101; opacity: 0.105937; color: rgb(255, 255, 255); background: <?php echo random_color();?>; padding: 5px; display: none;"><?php $tags->name(); ?>(<?php $tags->count(); ?>)</a>
<?php endwhile; ?>
            </div>
        </div>
            </div>   

 说明:
 这里引用的是我网站的JS路径,建议你下载下来,免得后期失效。下载后的js,可以修改旋转的半径,速度等参数。
 有强迫症的人,建议你整合CSS和js到你的文件中。

关于使用PJAX,导致功能失效的问题:

 如果页面中,使用了pjax,以上代码很有可能失效,3Dtag无法正常显示,原因是pjax技术不会刷新加载对应的js,建议采用以下代码,粘贴在pjax的必用的js中,(注意函数书写格式,和你模板中函数格式一样,免得加载失败。)

此处内容,需回复之后可见


做个小互动,答对有惊喜!

共计 0 条评论,点此发表评论
博客主页 行业知识以及项目经验分享,是件有意义的事情。为国家培养中层力量,发挥自己的一点作用! 51统计
蜀ICP备2022005623号 川公网安备 51012202001212号 本站已运行 1 年 208 天 4 小时 46 分 Copyright © 2022 ~ 2023. xcshare:Hydraulic Engineer,生活记录与感想! All rights reserved.
历史足迹