jueves, 1 de octubre de 2015

Jquery - Ramdom Color

Posted by daycry at 16:07 Labels: , , , ,

Esta es un librería para generar colores de forma aleatoria.

El código se puede obtener desde GitHub:
https://github.com/daycry/randomColor.git

La utilización es muy sencilla, y aquí os pongo un ejemplo: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>just.RandomColor demo - JavaScript random color generator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="just.RandomColor.js"></script>
   <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 15px;
            overflow: hidden;
            margin: 3px;
        }

        .box {
            width: 20px;
            height: 20px;
            float: left;
            margin: 1px;
        }

        .form {
            position: fixed;
            width: 200px;
            padding: 20px;
            right: 10px;
            top: 50px;
            left: 50%;
            margin-left: -120px;
            background-color: #fff;
            color: #333;
        }

        button,
        .link {
            background-color: #0099FF;
            color: #fff;
            width: 200px;
            line-height: 40px;
            font-size: 16px;
            border: none;
            display: block;
            text-align: center;
            text-decoration: none;
            padding: 0;
            margin-top: 10px;
            cursor: pointer;
        }


    </style>
</head>
<body>

    <div class="holder"></div>
    <div class="form">
        <button id="refresh">Refresh</button>
    </div>

    <script>

    var total;

    function init () {

        var width = $(document).width(),
            height = $(document).height(),
            size = 20,
            x = width / size,
            y = height / size;
        total = x * y;
        
        if (total > 2500) {
            total = 2500;
        }

        draw();

    }

    function draw () {

        var c = new just.RandomColor();

        $('.holder').html('');

        for (var i = 0; i < total; i++) {
        
            $('.holder').append($('<div />').addClass('box').css('background-color', c.refresh().toCSS()));

        }

    }

    $('#refresh').click( function () {
        draw();
    });

    init();

    </script>

</body>
</html>

No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )