标签：padding oar 应用 分析 协议分析 name 协议 集成 scale
效果图如下：
代码：
<!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>
标签：padding oar 应用 分析 协议分析 name 协议 集成 scale
原文地址：http://www.cnblogs.com/Gaoswatou/p/6876101.html
