- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章一个很有趣3D球状标签云兼容IE8由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试。觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + js,不是基于jQuery的,所以不需要引入,代码复制下来就可以看到效果:
1
2
3
4
5
6
|
<
div
id
=
"div1"
>
<
a
href
=
"http://www.zzvips.com/bc/"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
>忘了滋味</
a
>
<
a
href
=
"http://www.zzvips.com/bc/"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
>忘了滋味</
a
>
<
a
href
=
"http://www.zzvips.com/bc/"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
>忘了滋味</
a
>
<
a
href
=
"http://www.zzvips.com/bc/"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
rel
=
"external nofollow"
>忘了滋味</
a
>
</
div
>
|
1
2
3
4
5
6
7
|
body {
background
:
#000
url
(index.png)
no-repeat
center
230px
;}
#div
1
{
position
:
relative
;
width
:
450px
;
height
:
450px
;
margin
:
20px
auto
0
; }
#div
1
a {
position
:
absolute
;
top
:
0px
;
left
:
0px
;
font-family
: Microsoft YaHei;
color
:
#fff
;
font-weight
:
bold
;
text-decoration
:
none
;
padding
:
3px
6px
; }
#div
1
a:hover {
border
:
1px
solid
#eee
;
background
:
#000
; }
#div
1
.
blue
{
color
:
blue
;}
#div
1
.
red
{
color
:
red
;}
#div
1
.yellow {
color
:yellow;}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
var
radius = 120;
var
dtr = Math.PI/180;
var
d=300;
var
mcList = [];
var
active =
false
;
var
lasta = 1;
var
lastb = 1;
var
distr =
true
;
var
tspeed=10;
var
size=250;
var
mouseX=0;
var
mouseY=0;
var
howElliptical=1;
var
aA=
null
;
var
oDiv=
null
;
window.onload=
function
()
{
var
i=0;
var
oTag=
null
;
oDiv=document.getElementById(
'div1'
);
aA=oDiv.getElementsByTagName(
'a'
);
for
(i=0;i<aA.length;i++)
{
oTag={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine( 0,0,0 );
positionAll();
oDiv.onmouseover=
function
()
{
active=
true
;
};
oDiv.onmouseout=
function
()
{
active=
false
;
};
oDiv.onmousemove=
function
(ev)
{
var
oEvent=window.event || ev;
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
mouseX/=5;
mouseY/=5;
};
setInterval(update, 30);
};
function
update()
{
var
a;
var
b;
if
(active)
{
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
}
else
{
a = lasta * 0.98;
b = lastb * 0.98;
}
lasta=a;
lastb=b;
if
(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
return
;
}
var
c=0;
sineCosine(a,b,c);
for
(
var
j=0;j<mcList.length;j++)
{
var
rx1=mcList[j].cx;
var
ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
var
rz1=mcList[j].cy*sa+mcList[j].cz*ca;
var
rx2=rx1*cb+rz1*sb;
var
ry2=ry1;
var
rz2=rx1*(-sb)+rz1*cb;
var
rx3=rx2*cc+ry2*(-sc);
var
ry3=rx2*sc+ry2*cc;
var
rz3=rz2;
mcList[j].cx=rx3;
mcList[j].cy=ry3;
mcList[j].cz=rz3;
per=d/(d+rz3);
mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
mcList[j].y=ry3*per;
mcList[j].scale=per;
mcList[j].alpha=per;
mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
}
doPosition();
depthSort();
}
function
depthSort()
{
var
i=0;
var
aTmp=[];
for
(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function
(vItem1, vItem2)
{
if
(vItem1.cz>vItem2.cz)
{
return
-1;
}
else
if
(vItem1.cz<vItem2.cz)
{
return
1;
}
else
{
return
0;
}
}
);
for
(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
function
positionAll()
{
var
phi=0;
var
theta=0;
var
max=mcList.length;
var
i=0;
var
aTmp=[];
var
oFragment=document.createDocumentFragment();
//随机排序
for
(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function
()
{
return
Math.random()<0.5?1:-1;
}
);
for
(i=0;i<aTmp.length;i++)
{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
for
(
var
i=1; i<max+1; i++){
if
( distr )
{
phi = Math.acos(-1+(2*i-1)/max);
theta = Math.sqrt(max*Math.PI)*phi;
}
else
{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
}
//坐标变换
mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
mcList[i-1].cz = radius * Math.cos(phi);
aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+
'px'
;
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+
'px'
;
}
}
function
doPosition()
{
var
l=oDiv.offsetWidth/2;
var
t=oDiv.offsetHeight/2;
for
(
var
i=0;i<mcList.length;i++)
{
aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+
'px'
;
aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+
'px'
;
aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+
'px'
;
aA[i].style.filter=
"alpha(opacity="
+100*mcList[i].alpha+
")"
;
aA[i].style.opacity=mcList[i].alpha;
}
}
function
sineCosine( a, b, c)
{
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
|
。
最后此篇关于一个很有趣3D球状标签云兼容IE8的文章就讲到这里了,如果你想了解更多关于一个很有趣3D球状标签云兼容IE8的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我计划使用 python 开发一个 Web/云应用程序,它执行以下操作, 1.上传Perl/Python抓取脚本并执行。 2. 上传脚本以按计划运行。 3. 使用不同的输入参数运行同一脚本的多个实例。
我正在开发一个应用程序,我想实现一个功能,可以在相同的用户设备之间共享,比方说,收藏夹、书签等。所以,我想实现类似 iCloud 的东西。 我想到了 2 个可能的想法:Backup Manager 和
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在尝试从一系列短语中使一个单词云成为一个词云,而不是从单个单词中重复很多短语。我的数据看起来像这样,数据框的一列是短语列表。 df$names <- c("John", "John", "Jose
对于配置AWS服务(EC2/R53/VPC/S3/..),Terraform等技术在执行回滚、错误处理等方面的方法不可靠。 AWS CloudFormation 模板解决了这些问题。 CloudFor
我无法使用我的 Azure 帐户执行任何操作,例如创建服务器或数据库或任何操作。看起来这一切都围绕着我无法创建的资源组>我收到此错误: 这特别困难,因为我什至无法使用云外壳,因为我得到了这个:请求 C
是否有在客户端使用 socket.io 的云/托管推送系统?据我所知,没有一个系统使用 socket.io AFAIK: http://beaconpush.com/ http://pusher.co
有没有办法在我的计算机上本地运行 RStudio,但使用运行 R 作为引擎的远程计算机而不是本地 R 安装? 需要明确的是,我知道可以将 RStudio 服务器与 Web GUI 一起使用,但我问的是
我正在寻找在这种情况下可以使用的合适服务: 在视频模式下打开相机并将其流式传输到 azure 云。 并从另一方聆听(也包括客户)。 我读到了有关 Azure 媒体服务的信息。 但根据this我知道客户
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: Google App Engine, getting started 如何将 Java 应用程序部署到 Google
我有一个用 Java 7 编写的相当大的控制台应用程序,它管理大量的订单处理。 该应用程序使用大量订单 Web 服务、与数据库交互并将数据插入 ERP 系统。该应用程序的要求没有指定用户交互,因此在项
我已经阅读过有关 Windows Azure 的内容,但为了深入了解这项技术,我(显然)需要使用它。我有一个小型 ASP.NET 网站,流量很少,我认为在 Azure 上托管该网站会节省我的钱。除此之
我的 Activity 中有 3 个编辑文本(姓名、手机号码、职业)和一个按钮(保存)。每次用户单击按钮时,我都想将这三个数据保存到 Parse-cloud。然后新 Activity 在 imagev
我正在尝试通过node.js 将传感器数据发送到artik cloud。 (使用网络套接字和串行端口)。但它发送空。有人知道原因吗?我刚刚复制了教程中的代码,因此没有语法错误。 var webSock
我对 docker hub 和 docker cloud 有一点困惑。我有需要安装在客户端服务器中并运行容器的 docker 镜像。我相信这可以使用 docker hub 来完成,它允许在我的私有(p
晋城,华夏文化发祥地之一。两万年前留下高都遗址、塔水河、下川等人类遗址,女娲补天、愚公移山等神话传说,如今在云上有了崭新的魅力。 9月3日,阿里云数字中国行•晋城峰会期间,晋城市人民政府公布了
我刚开始使用 Airflow 插件,有点困惑。 我在 GCP (composer-1.13.4-airflow-1.10.12) 上使用 Cloud Composer 作为托管服务运行它 我按照文档编
据我所知,PHP 分析工具 XDebug 将其结果保存到文件中。然而,当应用程序运行在云分布式环境中时,处理此类文件是很困难的。处理这种情况的最佳做法是什么? XDebug 中是否有任何方法(最好是可
我们正在将 PHP 网站迁移到 Azure 云 Web 服务(Web 角色)。 目前,该网站通过驱动器盘符访问将用户提交的图像文件保存到文件系统。然后通过 URL 提供这些图像,例如content.e
我是一名优秀的程序员,十分优秀!