html知识管理,index.html

番薯君个人博客笔记

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

原始数据

按行查看

历史