JavaScript标签云Tag Cloud,仿QQ好友印象效果

发布时间：2018-08-19 11:17:36 所属栏目：PHP教程来源：站长网

导读：Java Script标签云Tag Cloud，仿QQ好友印象效果，此类效果也可以叫做云标签，实现思路: 1.先给元素随机出一个左上顶点的位置; 2.然后根据元素的框高，用一维数组判断元素所在的二维坐标有没有被标记arr=1; 3.如果有被标记的，计数随机次数radomTag++，然后

　　JavaScript标签云Tag Cloud，仿QQ好友印象效果，此类效果也可以叫做云标签，实现思路:

　　1.先给元素随机出一个左上顶点的位置;

　　2.然后根据元素的框高，用一维数组判断元素所在的二维坐标有没有被标记arr=1;

　　3.如果有被标记的，计数随机次数radomTag++，然后重新进行第一步，并且标记flag=false，结束第二部的循环检查;

　　4.如果radomTag == radomKey阀值，则假设这个层满了，不能塞进块了，那么就新建一层arr=[];

　　5.如果在第3步所有的点都没有被标记，即flag=true，则把这个节点显示在页面上，重置radomTag = 0;

　　随机命中率不知道还有木有办法提高，我测试过，阀值设置为10的时候每层只有25个元素，当阀值设置成1000时每层有50个元素

　　示例：

<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>JS标签云</title> <style type="text/css"> #box { width: 500px; height: 500px; position: relative; border: 1px solid #000; list-style: none; } #box li { height: 25px; line-height: 25px; position: absolute; padding: 5px 30px; border: 1px solid #DDDDDD; background: none repeat scroll 0 0 #EFEFEF; } </style> </head> <body> <ul id="box"> <li>烈火学院</li> </ul> <script type="text/javascript"> var box = document.getElementById('box'), //约束范围 list = box.getElementsByTagName('li')[0], //随机元素 arr = new Array(), //记录坐标 radomTag = 0, //随机标记 radomKey = 10; //随机阀值 positionFuc(list);//默认的那个放进算法中 for (var i = 0; i <= 100; i++) { var nodeLi = list.cloneNode(true); box.appendChild(nodeLi); positionFuc(nodeLi); } function positionFuc($node) { var w = $node.offsetWidth, //元素宽度 h = 37, //元素高度 boxWidth = 500, //box宽度 boxHeight = 500, //box高度 xp = 31, //横向(padding+border)/2 yp = 6, //纵向(padding+border)/2 radomX = radomFuc(boxWidth - w), //横向随机位置 radomY = radomFuc(boxHeight - h), //纵向随机位置 flag = true; for (var x = 0; x <= w; x++) { for (var y = 0; y <= h; y++) { if (arr[(radomY + y) * boxWidth + radomX + x] == 1) { radomTag++; if (radomTag == radomKey) arr = []; positionFuc($node); return flag = false; } } } if (flag) { $node.style.cssText = 'top:' + radomY + 'px;left:' + radomX + 'px;background-color:' + hsl2color([radomFuc(360), 100, 70]); for (var x = xp; x <= w - xp; x++) { for (var y = yp; y <= h - yp; y++) { arr[(radomY + y) * boxWidth + radomX + x] = 1; } } radomTag = 0; } } function radomFuc($value) { //取随机数 return parseInt($value * Math.random()); } function hsl2color(hsl) { //HSL颜色算法 if (hsl[0] > 360 || hsl[0] < 0 || hsl[1] > 100 || hsl[1] < 0 || hsl[2] > 100 || hsl[2] < 0) return "#000000"; var rgb = [0, 0, 0]; if (hsl[0] <= 60) { rgb[0] = 255; rgb[1] = Math.floor(255 / 60 * hsl[0]); } else if (hsl[0] <= 120) { rgb[0] = Math.floor(255 - (255 / 60) * (hsl[0] - 60)); rgb[1] = 255; } else if (hsl[0] <= 180) { rgb[1] = 255; rgb[2] = Math.floor((255 / 60) * (hsl[0] - 120)); } else if (hsl[0] <= 240) { rgb[1] = Math.floor(255 - (255 / 60) * (hsl[0] - 180)); rgb[2] = 255; } else if (hsl[0] <= 300) { rgb[0] = Math.floor((255 / 60) * (hsl[0] - 240)); rgb[2] = 255; } else if (hsl[0] <= 360) { rgb[0] = 255; rgb[2] = Math.floor(255 - (255 / 60) * (hsl[0] - 300)); } var sat = Math.abs((hsl[1] - 100) / 100); rgb[0] = Math.floor(rgb[0] - (rgb[0] - 128) * sat); rgb[1] = Math.floor(rgb[1] - (rgb[1] - 128) * sat); rgb[2] = Math.floor(rgb[2] - (rgb[2] - 128) * sat); var lum = (hsl[2] - 50) / 50; if (lum > 0) { rgb[0] = Math.floor(rgb[0] + (255 - rgb[0]) * lum); rgb[1] = Math.floor(rgb[1] + (255 - rgb[1]) * lum); rgb[2] = Math.floor(rgb[2] + (255 - rgb[2]) * lum); } else if (lum < 0) { rgb[0] = Math.floor(rgb[0] + rgb[0] * lum); rgb[1] = Math.floor(rgb[1] + rgb[1] * lum); rgb[2] = Math.floor(rgb[2] + rgb[2] * lum); } return "#" + (0x1000000 + rgb[0] * 0x010000 + rgb[1] * 0x000100 + rgb[2]).toString(16).substring(1); } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

PHP如何指定文件的访问	php 创建目录与php删除
php include与require	php中的观察者模式简单