您当前位置:
  1. 首页
  2. 网页技巧
  3. 3D标签云特效

3D标签云特效

      昨天超站的版主小光头看到一个网站上有一个TAGS云的特效,很漂亮也很有个性。我上去看了一下,原来是3D标签云。说实话确实很漂亮,这个3D标签云实现起来后可以将所有的标签都集中在一个FLASH里,并且所有的标签组成的标签云还会在这个3D标签云内形成一个球形不断的滚动;当你的鼠标移动到这个3D标签云内的任何一个标签时,所有标签会加速滚动,并且所你选择的那个标签会自动滚到最前。如图:

     我一看到这个3D标签云的特效的时候,我也一下子喜欢上了,而且很巧合,之前我也在另一个网站上看到同样的效果。于是我就答应小光头帮他把代码拿出来,费了好长的时间我才弄清楚这个特效。下面是我实现之后的效果演示:http://www.yi7.org/demo/3d-tags-demo.htm

     这个3D标签云代码如下:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="240" height="200" id="myFlashContent">
<param name="movie" value="3dtags.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
<param name="allownetworking" value="all" />
<param name="flashvars" value='jsonData=
{"type":"tagBall","delicacy":2,"renderCycleTime":20,"radius":80,"focalLength":300,"color":"#000000","rotationModeX":14,"rotationModeY":14,"elements":
[{"type":"text","data":"2009","hcolor":"0xFF6600","size":16,"bold":1,"herf":"http://www.yi7.org/catalog.asp?tags=2009","window":"_blank","fontFamily":"\u5fae\u8f6f\u96c5\u9ed1"}]}' />
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash
player" /></a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

     上面的代码中,只给出了一个标签的链接,红色部分为一个完整的标签代码,多个标签用半角逗号隔开;上面的代码中蓝色部分为你的标签和链接的地址,除了这两个地方要改,其余的不需要改。 如果要改变显示的大小,请直接修改代码第一行中的width="240" height="200"部分。

     这样3D标签云特效需要用到一个.swf的文件,下载这个文件请登陆http://bbs.supadmin.com/thread-26654-1-1.html。下载后上传到您的网站,同时请在上面代码第二行中的“<param name="movie" value="3dtags.swf" />”将该swf的文件路径修改正确,如果不会相对路径,可以使用绝对路径。

     因为我也是匆忙中找到的这个代码,虽然不是很完美,但是确实可以使用,而且如果您使用的CMS或你的网站程序支持循环标签调用的话,要实现起来还是比较简单的。如果对上面的代码看得不是很明白,请直接查看演示页面http://www.yi7.org/demo/3d-tags-demo.htm的源代码,仔细分析很容易找出规律。本来我也想做一个直接拿去就可以用的代码,但是每个人使用的网站程序不一样,标签的调用方法也不一样,而且我看了大部分网站的在3D标签云的效果都是使用的网站程序的插件,所以我无法提供直接拿去就能用的代码。

     当然,如果您发现有更完美的3D标签云的调用方式,请您分享给我。

     最后,关于这个3D标签云的使用,有几点需要注意:1)、链接中好像不能有中文字符,否则链接会出错;2)、支持最大的显示效果是240X200,超过这个范围标签的显示范围也就这样大,四周会出现很多空白,但是对于缩小没有限制,这应该是那个swf文件的原因;3)、这个3D标签云内不要放太多的标签,因为他的显示大小有限,多了会显得密密麻麻,反而不好看了;4)、要浏览到这个3D标签云的特效,需要你的浏览器支持flashplayer插件,我在本机测试IE内核的浏览器直接就可以浏览,但是火狐内核的浏览器需要下载安装flashplayer。

to "3D标签云特效"

    • 为什么我安装的标签云不能用,后台显示说是一个严重的错误,无语啊?

      回复

    • 为什么我安装的标签云后台显示说出现一个严重的错误呢?

      回复

    • lead
    • 16#. lead

      发表于 2011-9-15 18:13:15

    • 谢谢楼主分享了!!
      yw 于 2011-11-4 9:32:11 回复

      回复

    • smile
    • 15#. smile

      发表于 2011-8-24 16:42:37

    • 我想问一下这种3D标签云在Dreamweaver里怎么实现

      回复

    • 代码加在了dede的index.htm倒数第三行上面,swf放置在了index.htm同文件里,路径没有设置,原样,怎么不显示,而且加载很慢的

      回复

    • vike
    • 13#. vike

      发表于 2011-5-7 20:39:25

    • 请问我的网站标签云为什么不可以像你的这样动的www.tb888.in 帮我弄弄可以吗
      zipeng 于 2011-5-9 13:30:38 回复
      你的博客用的是WP程序,WP有一个标签云的插件,建议你在网上找一下,很容易就可以实现。

      回复

    • Great ! love it
      http://www.goobaiya.com/
      很好很漂亮,呵呵

      回复

    • 超站版主的博客呀,这个代码很不错,就是找这个代码找到你的博客来着

      回复

    • 这个云标签可以连接浏览本地网页吗??请回复我~~谢谢!
      博主 于 2011-3-1 16:43:12 回复
      不是很明白你的意思,请详细描述一下你的意思。

      回复

    • 独星
    • 9#. 独星

      发表于 2010-8-7 16:35:27

    • 标签云下面的内容不能显示……
      zipeng 于 2010-8-8 8:28:10 回复
      下面的内容?你指的是哪?

      回复

    • 到wp到处可见。
      zipeng 于 2010-7-17 16:27:25 回复
      是的,WP有这个的插件,安装这个插件后就可以直接显示这个效果。但是他的插件只能用在WP下吧,其他的系统不能用的吧?所以我发这个的代码就是希望用其他系统,比如CMS的也可以实现这个效果。

      回复

    • 小罗
    • 4#. 小罗

      发表于 2010-7-15 0:10:47

    • 楼上的,我是三哥,还有四哥五哥在等着呢,呵呵
      zipeng 于 2010-7-15 8:21:52 回复
      冒充我。。。

      回复

    • 第一次见到这个标签是在淘宝,今天才知道叫3D云标签。谢谢博主。
      zipeng 于 2010-7-14 19:29:49 回复
      感谢支持。

      回复

    • viv
    • 2#. viv

      发表于 2010-7-14 14:02:42

    • 3D标签确实很酷!!

      回复

    • 朋友的博客很不错 有意收录 不知道可否给 博客大全做个友链啊

      可以的话 做个即可收录

      优秀博客大全 http://www.93blog.com/

      qq 524808635

      zipeng 于 2010-7-14 19:29:26 回复
      非常抱歉,我博客不做网址站的链接。
      而且做的话,我要求对方网站PR大于等于3.

      回复

发表评论

validcode