js模拟qq印象效果
2012-03-16 15:31
330 查看
<!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>
运行效果如下:
相关文章推荐
- js模拟QQ窗口的抖动效果
- js模拟QQ窗口的抖动效果
- js模拟QQ面板拖拽效果及状态切换效果(DOM事件)
- js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)
- js 模拟qq对话框的拖动效果
- js 模拟qq对话框的拖动效果
- JS实现仿QQ面板的手风琴效果折叠菜单代码
- js模拟打字效果
- js 模拟气泡屏保效果代码
- js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
- js模拟滤镜的图片渐显效果
- 记一次 JS 模拟 CSS active 效果的过程
- js+CSS实现模拟华丽的select控件下拉菜单效果
- 模拟QQ的停靠时隐藏效果,隐藏树形菜单
- 模拟Flash放大镜的动态JS效果
- day2总结--JS切换卡效果(转自个人印象笔记)
- JS模拟的腾讯微博app撕纸效果的实例代码
- 原生js实现鼠标点击效果(不是真实鼠标点击,用js模拟鼠标点击,类似jquery trigger效果)
- 原创JS模拟Alert弹出框效果--自定义CSS样式
- JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码