首页 > 代码库 > （漂浮？气泡？）js生成位置、颜色、透明度随机的字块
（漂浮？气泡？）js生成位置、颜色、透明度随机的字块
效果图如下：
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <style> body { background-color: #ededed; } #container { width: 650px; height: 500px; border: 1px solid #0ff; } .newItem { /*width: 50px; height: 30px;*/ display: block; cursor: pointer; max-width: 115px; font-size: 16px; font-weight: 600; background-color: white; border-radius: 10px; padding: 15px 30px; } .newItem:hover { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); z-index: 999; /*opacity: 1*/ } </style></head><body> <div id="container"></div></body><script> $(document).ready(function () { //定义容器 var container = $(‘#container‘); //定义初识坐标 var x = 0, y = 0, itemPos = [], div_html = ‘‘, opacity = ‘‘, color = ‘‘; //获取图片随机浮动的可见范围 var w = container.width(), h = container.height(); //定义数组 var dataArray = ["TCP/IP协议分析与应用", "网络管理与维护", "高级路由技术", "高级交换技术", "网络应用开发与系统集成", "网络安全技术", "移动通讯与无线网络", "C++", "JAVA", "Android", "CCNA", "CCNP", "CCIE", "HTML/HTEML5", "CSS2.0/CSS3.0", "JavaScript", "ORACLE数据库" ] //生成随机不透明度 function getOpacityRandom() { var o = ‘‘; var oArray = ["0.6", "0.7"]; var oIndex = Math.round(Math.random() * oArray.length) o = oArray[oIndex]; return o; } //生成随机颜色 function getColorRandom() { var c = "#"; var cArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; for (var i = 0; i < 6; i++) { var cIndex = Math.round(Math.random() * 15); c += cArray[cIndex]; } return c; } $.each(dataArray, function (index, el) { x = Math.round(Math.random() * w); y = Math.round(Math.random() * h); // itemPos.push({ // _x: x, // _y: y // }) opacity = getOpacityRandom(); color = getColorRandom(); div_html = ‘<a class="newItem" style="opacity:‘ + opacity + ‘;position:absolute;left:‘ + x + ‘px;top:‘ + y + ‘px;color:‘ + color + ‘;">‘ + el + ‘</a>‘ container.append(div_html); }); });</script></html>
（漂浮？气泡？）js生成位置、颜色、透明度随机的字块
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。