body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: #111111;
}
#container {
height: 100px;
}
a {
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #f7f7f7;
display: inline-block;
border-radius: 100%;
position: absolute;
}
a:hover {
color: rgb(240, 20, 20);
}
var json = [
{ name: "Vueress", link: "http://huc.gitee.io/book/vuepress" },
{ name: "Git", link: "http://huc.gitee.io/book/git" },
{ name: "Linux", link: "http://huc.gitee.io/book/linux" },
{ name: "SpringBoot", link: "http://huc.gitee.io/book/springboot" },
{ name: "SpringSecurity", link: "http://huc.gitee.io/book/springsecurity" },
{ name: "webpack", link: "http://huc.gitee.io/book/webpack" },
{ name: "Vue", link: "http://huc.gitee.io/book/vue" },
{ name: "security5", link: "http://huc.gitee.io/book/security5" },
{ name: "Docker", link: "http://huc.gitee.io/book/docker" },
{ name: "SpringCloud", link: "http://huc.gitee.io/book/springcloud" },
{ name: "FastDFS", link: "http://huc.gitee.io/book/fastdfs" },
{ name: "RabbitMQ", link: "http://huc.gitee.io/book/rabbitmq" },
{name: "test", link: "http://huc.gitee.io/book/rabbitmq" },
{name: "test11", link: "http://huc.gitee.io/book/rabbitmq" }
];
(function () {
var padding=30;
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
String.prototype.visualLength = function () {
var fontSize = $("a").css("fontSize");
var ruler = $("a").css({
"font-size": fontSize || "inherit"
});
ruler.text(this);
return { "width": ruler.width(), "height": ruler.height() };
}
function randomColor(a) {
return "rgba(" + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + a + ")";
}
function randomNumber(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var str = "";
json.forEach(function (item) {
var len = item.name.visualLength();
var paddingW = Math.max(len.height, len.width) + padding;
var paddingH = (paddingW - len.height) / 2;
var background = "radial-gradient(circle at " + paddingW + "px " + paddingH + "px, " + randomColor(1) + "," + randomColor(1) + ")";
str += "" + item.name + "";
});
$("#container").append(str);
$("a").each(function (index, item) {
anim(index);
$("a")[index].onmouseout = (function (i) {
return function () {
var el=$("a")[i];
if (!$(el).is(':animated')) {
anim(i);
}
}
})(index);
$("a")[index].onmouseover = (function (i) {
return function () {
var el=$("a")[i];
if ($(el).is(':animated')) {
$(el).stop(true,false);
}
}
})(index);
});
function anim(i) {
var ele = $("a")[i];
var eh = $(ele).innerHeight();
var ew = $(ele).innerWidth();
var sobj = function () {
var hl = Math.ceil(Math.random() * (cw - ew));
var ht = Math.ceil(Math.random() * (ch - eh));
var ol = $(ele).offset().left;
var ot = $(ele).offset().top;
var t = Math.max(Math.abs(hl - ol), Math.abs(ht - ot));
var an = $(ele).animate({ "left": hl, "top": ht},
t * 10, function () {
sobj();
});
}
sobj();
}
})();
一键复制
编辑
Web IDE
原始数据
按行查看
历史