Nicks Cloud

http://aNNiMON.com/str/users_top_cloud.php

by Edward

HTML

<div class="phdr"><b>Самые активные на форуме</b></div>
<div class="elem">Форум | <a href="users_top_cloud.php?act=guest">Гостевая</a> | <a href="users_top_cloud.php?act=kom">Комментарии</a></div>
<div id="field"></div>
<div id="outbox" style="overflow:hidden;position:relative;cursor:move;cursor:all-scroll;cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;">
<div id="inbox" style="position:relative;width:0px;height:0px;overflow:visible;"></div>
<div id="overbox" style="position:absolute;top:0px;bottom:0px;pointer-events:none;border-style:solid;border-image:radial-gradient(rgba(255,255,255,0),rgba(255,255,255,255)) 49% repeat;text-align:center;vertical-align:middle;;"></div>
</div>

JavaScript

var pre_link = 'http://annimon.com/user/';
var data = [
    // login, nickname, #color, value
    ['annimon', 'aNNiMON', 0, 544],
    ['ksakep', 'Ксакеп', '#2b2a2a', 81],
    ['bogdan-g', 'Bogdan-G', 0, 45]
];
var story = [];
var mouse = {
    x: 0,
    y: 0,
    i: 0,
    o: 0,
    like: [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
    last: []
};
var outbox, inbox, overbox;
console.log('KONAMI presents...');
window.onload = function () {
    outbox = document.getElementById('outbox');
    inbox = document.getElementById('inbox');
    overbox = document.getElementById('overbox');
    inbox.drag = false;
    inbox.top = 0;
    inbox.left = 0;
    inbox.side = outbox.parentNode.clientWidth;
    outbox.style.height = outbox.style.width = inbox.side + 'px';
    overbox.style.height = overbox.style.width = Math.ceil(0.8 * inbox.side) + 'px';
    overbox.style.borderWidth = Math.ceil(0.1 * inbox.side) + 'px';
    outbox.onmousedown = function (e) {
        outbox.style.cursor += 'bing';
        if (inbox.drag = e.which == 1)
            return false;
    };
    document.onmousemove = function (e) {
        if (inbox.drag) {
            inbox.style.top = (inbox.top += (e.pageY - mouse.y)) + 'px';
            inbox.style.left = (inbox.left += (e.pageX - mouse.x)) + 'px';
        }
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    };
    document.onmouseup = function () {
        if (inbox.drag) {
            inbox.drag = false;
            if (outbox.style.cursor.indexOf('bing') > 0)
                outbox.style.cursor = outbox.style.cursor.slice(0, -4);
        }
    };
    document.onkeyup = function (e) {
        mouse.last[mouse.i] = e.keyCode;
        if (mouse.like[mouse.o] == mouse.last[mouse.i])
            mouse.o++;
        else
            mouse.o = +(mouse.like[0] == mouse.last[mouse.i]);
        mouse.i = (mouse.i + 1) % 10;
        if (mouse.o == 10) {
            document.onkeyup = undefined;
            var b =...