javascript版本的3d标签云球简单分析

flash版本的性能看起来比较好.但是对于seo来说不是很友好;

有个项目需要这东西.于是搜索了一下,发现wp上实现的比较好.

且有人实现了js版本.

由于自己没有安装wp.于是通过php代码查看一下和粗略跟踪下js,js边的配置和使用情况大概如下.

从Plugin Name: WP-Cirrus
 *    Plugin URI: http://www.ga-ap.de/plugins/wp-cirrus/下载它的源代码回来,

wp_cirrus_gwt目录中的文件不要动,

它大概的加载逻辑是

人工加载它的css(其实这个文件,没什么内容,自己可以看着写)

再加载那个目录下的js文件

然后在页面放置以下格式的结构

标签html结构,id是写死的,不能改动,除非想改它里面的html代码,觉得没必要,这个东西ting吃cpu的,一个就足够了,不可能还有人一个页面多个;

h和w最好也写上,下面的参数与这有关系,里面的子元素可以自己使用样式来修饰.

<box style="position: relative; height: 550px; width: 550px;"  id="cirrusCloudWidget">

<a>标签一</a>

<a>标签2</a>

</box>

配置js

<script>

//注意这里的变量名是不能更改的

var wpcirrusRadiuscirrusCloudWidget = 0;//半径,0自动根据外框检测,就是上面的html代码结构中box的w和h
var wpcirrusRefreshratecirrusCloudWidget = 40;//刷新频率,ms, 40 = 25fps, 0 = default (30ms)
var wpcirrusFontColorcirrusCloudWidget = 'white';//字色
var wpcirrusBackgroundColorcirrusCloudWidget = 'black';//背景

</script>

配置即可完成

;

代码分析

里面经过md5_nocache.html文件它们的对应关系是(也就是对应的浏览器内核调用不同,估计编写的人对浏览器和js引擎比较nb,里面使用了不同的优化):

["gecko1_8"] "19CF2CFAEA361BC9322AB6BA0049A1EC"
["opera"] "1A432AC32F64235633E7D122787AC882"
["ie8"] "5002B6412A8D5B4C8F6F8D56590FC449"
["safari"] "55860FE4F948701465AE6303D5E1503D"
["ie6"] "F797846EE06A281B237C60BF95CD2CA3"
["ie9"] "FF0F5B45604CEA0EA47B4C76C6F91E3D"

通过.js文件分析内核,然后通过iframe加载对应的内核渲染html文件

因为这个东西,个数过多时,会非常难看,

所以,可以配合定时换批的动作来实现多数量,然后在更换时,元素慢慢变小,换完后再慢慢变大,再设置一下class来定义新的样式即可.

使用div隐藏+放大直径