用JS实现3D球状标签云示例代码_javascript技巧_脚本之家

Matter: 1、发现实例不足,无法悬停 2、无法系统随机自动上色
首先使用标签云的一家高知名度的网站—照片共享网站Flickr。标签云的设计者是交互设计师Stewart
Butterfield。之后,标签云被诸如del、Technorati等网站采纳。
首次公布的外观标签云,可归结起来主要是”潜意识档案” ,在 Douglas
Coupland的Microserfs 。在Lester Leaps
Out,威尔士诗人朗道,使用同样的逻辑加权文本,以创造一个图形文字地图来描述爵士音乐。诗中出现在他的书《Magic
Fire Chevrolet》中 。 html代码段 复制代码
代码如下:

看见一个很有趣的标签云,3D球状,兼容 IE
8,亲测可用!其他版本没有测试。觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果:接下来是代码,html

188金宝搏官网,3D球状标签

  • css +
    js,不是基于jQuery的,所以不需要引入,代码复制下来就可以看到效果:

    忘了滋味忘了滋味忘了滋味忘了滋味

    body {background: #000 url no-repeat center 230px;}#div1 {position:relative; width:450px; height:450px; margin: 20px auto 0; }#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; }#div1 a:hover {border: 1px solid #eee; background: #000; }#div1 .blue {color:blue;}#div1 .red {color:red;}#div1 .yellow {color:yellow;}

    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;aA=oDiv.getElementsByTagName;for{oTag={};oTag.offsetWidth=aA[i].offsetWidth;oTag.offsetHeight=aA[i].offsetHeight;mcList.push;}sineCosine;positionAll();oDiv.onmouseover=function (){active=true;};oDiv.onmouseout=function (){active=false;};oDiv.onmousemove=function {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;};function update(){var a;var b;if{a = (-Math.min( Math.max, size ) / radius ) tspeed;b = (Math.min( Math.max, size ) / radius ) tspeed;}else{a = lasta 0.98;b = lastb 0.98;}lasta=a;lastb=b;if<=0.01 && Math.abs{return;}var c=0;sineCosine;for(var j=0;j

发表评论

电子邮件地址不会被公开。 必填项已用*标注