很多知名博主都喜欢弄个标签云。今天特地看了下源码。把标签云的方法单独扣了出来。这里做一下记录
html页面代码
|
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>js标签云</
title
>
<
meta
name
=
"description"
content
=
"js代码制作标签云球状3D旋转展示，通过鼠标滑过标签感应来进行3D旋转效果."
/>
</
head
>
<
body
>
<
style
type
=
"text/css"
>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#09c;}
/* rotate */
#rotate{height:400px;width:450px;position:relative;margin:10px auto;}
#rotate a{position:absolute;top:0px;left:0px;color:#fff;font-weight:bold;padding:3px 6px;font-size:14px;}
#rotate a:hover{border:1px solid #eee;background:#000;border-radius:5px;}
</
style
>
<
script
type
=
"text/javascript"
src
=
"C:\Users\fujinzhou\Downloads\rotate.js"
></
script
>
<!-- 标签内容 -->
<
div
id
=
"rotate"
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>php</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>python</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>java</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>c</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>lua</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>linux</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>apache</
a
>
<
a
href
=
"http://www.17sucai.com"
target
=
"_blank"
>Mysql</
a
>
</
div
>
<!-- 结束 -->
</
body
>
</
html
>
|
效果图
本文转自 shouhou2581314 51CTO博客，原文链接：http://blog.51cto.com/thedream/1860276，如需转载请自行联系原作者
