jQuery의 무작위 색상

Question

그래서 아래로 스크롤 할 때 최소화하는 머리글을 넣었고 위로 스크롤하면 위로 자랍니다. 헤더가 축소되면 밝은 회색으로 변하고 열리면 색상이 바뀝니다. 여기에 내가 발견 코드입니다 :

$(window).scroll(function() { 
if ($(document).scrollTop() == 0) { 
$('#header_nav').removeClass('tiny'); 
} else { 
$('#header_nav').addClass('tiny'); 
} 
}); 

내가 헤더 변경하려는 내가 페이지를 새로 고침 할 때 무작위로 색상입니다,하지만 난 정확한 색상을 사용하고 싶습니다. 백그라운드 색상을 변경하는 방법을 알아 냈습니다. '작은'머리글에 대해서도 알 수 있습니다. 그러나 jQuery에는 너무 바보 같아서 색상 랜더 마이저를 쓰고 위의 코드에 삽입 할 수 없습니다.

도와 주시겠습니까? 이

$(document).ready(function() { 
    var back = ["#ff0000","blue","gray"]; 
    var rand = back[Math.floor(Math.random() * back.length)]; 
    $('div').css('background',rand); 
}) 

을 VAR back에 당신은 당신이 원하는 모든 정확한 색상을 작성할 수 있습니다 안녕 당신이 JQuery와에이 같은 기능을 사용할 수 있습니다

Answer 1

: 사전에 당신의 도움을 주셔서 감사합니다. 그런 다음 $('div') 대신 헤더의 선택기를 설정할 수 있습니다.

확인이 데모 http://jsfiddle.net/sJTHc/5/

Answer 2

필자는 스크립트를 만들뿐만 아니라 일부 변경 포함되어 있습니다. 당신의 코드에서, 이벤트는 모든 scrollmovement에 의해 trigged되기 때문에 '작은'여러 개의 클래스를 추가 할 것입니다. 필자는 클래스를 추가했는데, 먼저이 클래스가 설정되어 있는지 확인합니다. 설정되지 않은 경우 스크롤의 색상이 변경됩니다. 당신이 '검사', 색상이 아닌가요 경우 아주 멋진 될 수있는 모든 scrollmovement을 바꿀 것을 제거하면 당신이 원하는 경우 간질 :

이

// array with the colors, you can add the colors here.  
var colors = ["red", "blue", "yellow", "black", "green"]; 

$(window).scroll(function() { 
    if ($(document).scrollTop() == 0) 
    { 
     //if scrollbar is at the top (doing nothing atm) 
    } 
    else if($("#header_nav").hasClass("colorSet")) 
    { 
     //if the colorSet class has been apended (remove this, if you want some fun :)) 
    } 
    else 
    { 
     //first, add the class, so we know we do not have to walk tru this anymore. 
     $('#header_nav').addClass('colorSet'); 

     // Apend a CSS background-color based on a rand function on our color array 
     $('#header_nav').css("background-color", colors[Math.floor(Math.random() * colors.length)]); 
    } 
}); 

이제 문 경우 첫번째 변경할 수 있습니다 (scrollTop()). 여기에서 colorSet 클래스를 제거하면 누군가가 아래로 스크롤하면 다시 새로운 색상을 얻을 수 있습니다.

임의의 색상을 가진 여러 클래스의 경우;

// array with the colors, you can add the colors here.  
var colors = ["red", "blue", "yellow", "black", "green"]; 

$(window).scroll(function() { 
    if ($(document).scrollTop() == 0) 
    { 
     //if scrollbar is at the top (doing nothing atm) 
    } 
    else if($("#header_nav").hasClass("colorSet")) 
    { 
     //if the colorSet class has been apended (remove this, if you want some fun :)) 
    } 
    else 
    { 
     //first, add the class, so we know we do not have to walk tru this anymore. 
     $('#header_nav').addClass('colorSet'); 

     // Apend a CSS background-color based on a rand function on our color array 
     $('#header_nav').css("background-color", colors[Math.floor(Math.random() * colors.length)]); 
     $('.header').css("background-color", colors[Math.floor(Math.random() * colors.length)]); 
     $('.header.tiny').css("background-color", colors[Math.floor(Math.random() * colors.length)]); 
    } 
}); 

그리고 동일한 색상을 공유하는 여러 클래스의 경우. "RGBA (varR, VARG, varR, 투명성);"

// array with the colors, you can add the colors here.  
var colors = ["red", "blue", "yellow", "black", "green"]; 

$(window).scroll(function() { 
    if ($(document).scrollTop() == 0) 
    { 
     //if scrollbar is at the top (doing nothing atm) 
    } 
    else if($("#header_nav").hasClass("colorSet")) 
    { 
     //if the colorSet class has been apended (remove this, if you want some fun :)) 
    } 
    else 
    { 
     //first, add the class, so we know we do not have to walk tru this anymore. 
     $('#header_nav').addClass('colorSet'); 

     var color = colors[Math.floor(Math.random() * colors.length)]; 
     // Apend a CSS background-color based on a rand function on our color array 
     $('#header_nav').css("background-color", color ); 
     $('.header').css("background-color", color); 
     $('.header.tiny').css("background-color", color); 
    } 
}); 

Answer 3

var randomColor = Math.floor(Math.random()*16777215).toString(16);

Answer 4

$(function() { 
 
    $("#random_color").click(function() { 
 
    $(".bola").each(function(index) { 
 
     var colorR = Math.floor((Math.random() * 256)); 
 
     var colorG = Math.floor((Math.random() * 256)); 
 
     var colorB = Math.floor((Math.random() * 256)); 
 
     $(this).css("background-color", "rgb(" + colorR + "," + colorG + "," + colorB + ")"); 
 
    }); 
 
    }); 
 
});

html { 
 
    height: 100% 
 
} 
 
body { 
 
    background-color: #fff; 
 
    height: 100%; 
 
    margin: 0px auto; 
 
    width: 800px; 
 
} 
 
#b0 { 
 
    float: left; 
 
    background-color: #DCDCDC; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
.linha { 
 
    float: left; 
 
    width: 100%; 
 
    margin-bottom: 10px 
 
} 
 
.bola { 
 
    float: left; 
 
    background-color: #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin-right: 10px; 
 
    border: 2px solid #000; 
 
    border-radius: 10px; 
 
    cursor: pointer 
 
} 
 
.bolaSel { 
 
    border: 2px solid #0000FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='b0'> 
 
    <div id='b1'> 
 
    <button id="random_color">Sortear cores</button> 
 
    <div class='linha'> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
    </div> 
 
    <div class='linha'> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
    </div> 
 
    <div class='linha'> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
    </div> 
 
    <div class='linha'> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
     <div class='bola'></div> 
 
    </div> 
 
    </div> 
 
</div>

당신은 그러나 당신이 사용할 필요가 투명도를 설정하는 네 번째 변수를 추가 할 수 있습니다 JQuery와 코드 및 임의의 색상 color 전화 대신 일반 RGB의는

Answer 5

var rand = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' ]; 
var color = '#' + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)] + rand[Math.ceil(Math.random() * 15)]; 

사용.
예 : var RandColor = color;
희망이 있습니다.