Генератор подбора цветов / Генераторы / Сниппеты Bootstrap

Каталог: Сниппеты Bootstrap

Категория: Генераторы

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2395

Количество символов:

Посмотрели: 2610 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.7 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: COLOR, цвет, Snippet, генератор, сниппет, Bootstrap, Generator

Поделился: BootstrapТема

Добавлено: 2017-10-18 в 00:56

Метка: 1508325049

⇄ ⇅

<hr />
 <button id="gen" class="btn">⚙ random</button>
 <button class="addColor red btn" data-color="r">+</button>
 <button class="removeColor red btn" data-color="r">-</button>
 <button class="addColor green btn" data-color="g">+</button>
 <button class="removeColor green btn" data-color="g">-</button>
 <button class="addColor blue btn" data-color="b">+</button>
 <button class="removeColor blue btn" data-color="b">-</button>
<label><strong class="lead">BootstrapTemaColor</strong></label>

<hr />

var rgb = blue | (green << 8) | (red << 16);
 return digits[1] + '#' + rgb.toString(16).paddingLeft("000000");
};
function gen(RGB){
 $(".sq").remove();
 if(!RGB || !RGB.r || !RGB.g || !RGB.b) RGB = getRGB()

var r = RGB.r
 var g = RGB.g
 var b = RGB.b

actualRGB = RGB
 
 for(var i = 250; i > 0; i -= 2){
 if(r - i < 0 && g - i < 0 && b - i < 0) continue
 rgb = [
 "rgb(",
 ((r - i > 0) ? r - i : 0),
 ",",
 ((g - i > 0) ? g - i : 0),
 ",",
 ((b - i > 0) ? b - i : 0),
 ")"
 ].join('')

var htmlStr = '<div class="sq" style="background-color: {{rgb}}"><p>{{hex}}</p></div>'
 htmlStr = htmlStr.replace('{{rgb}}', rgb)
 .replace('{{hex}}', colorToHex(rgb))
 $("#squares").append(htmlStr)
 }
 
 for(var i = 0; i < 250; i += 2){
 if(r + i > 250 && g + i > 250 && b + i > 250) continue
 rgb = [
 "rgb(",
 ((r + i < 250) ? r + i : 250),
 ",",
 ((g + i < 250) ? g + i : 250),
 ",",
 ((b + i < 250) ? b + i : 250),
 ")"
 ].join('')

$(document).ready(function(){
 gen();
 $("#gen").click(gen)
 $("html").on("mouseenter", ".sq", function(){
 $("p", this).show();
 }).on("mouseleave", ".sq", function(){
 $("p").hide();
 });
});

function incColor(color, inc){
 actualRGB[color] += inc
 gen(actualRGB)
}

$('.addColor').click(function(){
 var colorUp = $(this).data('color')
 var qty = $('input#qty').val()
 console.log(qty)
 qty = parseInt(qty, 10)
 if(!qty || isNaN(qty)) qty = 10
 incColor(colorUp, qty)
})

$('.removeColor').click(function(){
 var colorDown = $(this).data('color')
 var qty = $('input#qty').val()
 qty = parseInt(qty, 10)
 if(!qty || isNaN(qty)) qty = -10
 incColor(colorDown, qty * - 1)
})
</script>

</div></div>

BootstrapTema

Генератор подбора цветов

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0