jquery实现tagcloud，带3d效果。

最新推荐文章于 2022-09-14 19:38:36 发布

CP_Hook

最新推荐文章于 2022-09-14 19:38:36 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： jquery function list xhtml html 浏览器

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写网页时可能遇到要将一堆东西列出来的情况，比如姓名啊，标签啊等等~

如果僵硬的列出来感觉很别扭，因为往往你要列出来的东西很多（直观，明了），你又不想去写另外一个html。我就遇到了这样的问题。

想想用滚动吧，滚动起来效果也不是很好。在高人指点下，了解到还有tagcloud（标签云）这类东西。网上一搜，发现标签云写的漂亮的，那

真是华丽丽啊。

于是在网上找了份代码，贴上地址吧

http://blogold.chinaunix.net/u3/115194/showart_2242264.html

效果还是很不错的，就是看起来有点晃眼睛

<!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=gb2312" /> <title>tagcloud</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <style> body{ font-family: Arial, "MS Trebuchet", sans-serif; background-color: #111; } #list{ margin:0 auto; height:100px; width:1000px; overflow:hidden; position:relative; background-color:#000; } #list ul, #list li{ list-style:none; margin:0; padding:0; } #list a{ position:absolute; text-decoration: none; color:#3FF } #list a:hover{ color:#ccc; }</style> </head> <body> <div id="list"> <ul> <li><a href="#" href="#">ajax</a></li> <li><a href="#" href="#">css</a></li> <li><a href="#" href="#">design</a></li> <li><a href="#" href="#">firefox</a></li> <li><a href="#" href="#">flash</a></li> <li><a href="#" href="#">html</a></li> <li><a href="#" href="#">Devirtuoso</a></li> <li><a href="#" href="#">jquery</a></li> <li><a href="#" href="#">PHP</a></li> <li><a href="#" href="#">SEO</a></li> <li><a href="#" href="#">usability</a></li> <li><a href="#" href="#">www</a></li> <li><a href="#" href="#">web</a></li> <li><a href="#" href="#">xhtml</a></li> </ul> </div> <script type="text/javascript"><!-- $(document).ready(function(){ var element = $('#list a'); var offset = 0; var stepping = 0; var list = $('#list'); var $list = $(list) $list.mousemove(function(e){ var leftOfList = $list.eq(0).offset().left; var listWidth = $list.width(); stepping = (e.clientX - leftOfList)/listWidth * 0.2 -0.1; //e.client返回事件触发时鼠标指针对于浏览器页面的垂直坐标,(*0.2)-0.1保证了可以用鼠标选择向右或者向左移动 //修改stepping的值可以控制转动的速度 }); for (var i = element.length - 1; i >= 0; i--) { element[i].elemAngle = i * Math.PI * 2 / element.length; //设置每个元素的角度从0~(2*pi-1)/n } setInterval(render, 100); function render(){ for (var i = element.length - 1; i >= 0; i--){ var angle = element[i].elemAngle + offset; y = 80 + Math.sin(angle)*30; x = 50 + Math.cos(angle) * 40; size = Math.round(10 - Math.sin(angle) * 10); //控制字体大小,同时用来控制透明度，这个想法好。 var elementYCenter = $(element[i]).height()/2; var topValue = (($list.height()/2) * y / 100 - elementYCenter) + "px" $(element[i]).css("fontSize", size + "pt"); $(element[i]).css("opacity",size/10); $(element[i]).css("zIndex" ,size); $(element[i]).css("left" ,x+"%"); $(element[i]).css("top" ,topValue); } offset += stepping; stepping /= 1.05; } }); </script> </body> </html>

看看效果：

附带点说明：

这种效果的实现主要是利用了三角函数，设置stepping，角度不同，则显示出的效果不同（因为字体的大小和透明度都和角度有关）。

感觉这里有一点不足之处，就是stepping的设置。设计的很巧妙（可以实现两个方向的转动），但感觉不够精细。通过计算mousemove（）

事件获得的鼠标坐标与width/2的差来得到stepping，的确很好，但转动时速度过快，效果就很差了。所以我在之后加上了一句，每次调用

render()时，stepping/=1.05;这样会有些改进，但依旧效果不是太好。不知道是设计的问题还是代码的问题。应该stepping再改进下，效果

会好些。以后再试试。

PS：标签云这东西看起来就有点犀利，而且有各种各样的版本，看到过很牛的，计算起来实在麻烦。这个，还是值得研究的。

CP_Hook

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现tagcloud，带3d效果。

<br /> <br /> 写网页时可能遇到要将一堆东西列出来的情况，比如姓名啊，标签啊等等~<br /> <br /> 如果僵硬的列出来感觉很别扭，因为往往你要列出来的东西很多（直观，明了），你又不想去写另外一个html。我就遇到了这样的问题。<br /> <br /> 想想用滚动吧，滚动起来效果也不是很好。在高人指点下，了解到还有tagcloud（标签云）这类东西。网上一搜，发现标签云写的漂亮的，那<br /> <br />真是华丽丽啊。<br /> <br />
复制链接

扫一扫

专栏目录