검색결과 리스트
Programing/Web에 해당되는 글 21건
- 2016.04.27 ( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트
글
아.... 이건... 정말... 제가 심플하게... 만든거에요...
그냥...저냥...정말 심플하면서....급하게...
....
.......다음엔 퀄리티 높게 할께요 ㅠㅠ
1. 완성본
2. 소스부분
1. CSS 부분
<style>
html, body {
margin: 0;
}
.ColorPikerBody {
width: 350px;
height: 176px;
border: 1px;
border-style: dotted;
}
.ColorPik {
margin: auto;
width: 350px;
}
.ColorPik div {
width: 35px;
height: 35px;
line-height: 35px;
float: left;
cursor: pointer;
}
.ColorView {
width: 19px;
height: 19px;
float: left;
margin-right: 10px;
border: 1px;
border-style: dotted;
}
</style>
2. javascript 부분
<!-- jquery 파일은 다운받아서 쓰세용 -->
<script src='http://xline.dothome.co.kr/_Js/JQuery/jquery-2.2.2.js'></script>
<script>
function colorPickUp() {
if($('.ColorPikerBody').css("display") == "none"){
$('.ColorPikerBody').css("display", "block");
$('.ColorPik')[0].innerHTML = "";
for(var i=0; i< 5; i++){
for(var j=0; j<10; j++){
var InColorPick = Math.random().toString(16).replace(/.*(\w{6})/, '#$1');
$('.ColorPik')[0].innerHTML += "<div class='cPick_1' coloTump='"+InColorPick+"' style='background-color: "+InColorPick+";''></div>";
}
}
$('[class^="cPick_"]').hover(
function(){
$('.ColorView').css("background-color", $(this).attr("coloTump"));
$('#inputColor').val($(this).attr("coloTump"));
}
);
$('[class^="cPick_"]').click(function(){
$('.ColorPikerBody').css("display", "none");
$('#inputColor').val($(this).attr("coloTump"));
});
}else{
$('.ColorPikerBody').css("display", "none");
}
}
</script>
3. html 부분
<input type='text' id='inputColor' name='inputColor' size='7' onclick='colorPickUp(); return false;' value='Click'/><div class='ColorView'></div> <div class="ColorPikerBody" style="display:none"> <div class='ColorPik'></div> </div>
'Programing > Web' 카테고리의 다른 글
| ( CSS ) 아주심플하면서 이쁜 메뉴 만들기! (0) | 2016.05.10 |
|---|---|
| ( Web ) 스케쥴 관리 웹 만들기 (0) | 2016.05.02 |
| ( HTML & CSS ) 이쁜 메뉴만들기 두번째 !! (0) | 2016.04.26 |
| ( CSS )( HTML ) 이쁜 메뉴 만들기 (0) | 2016.04.22 |
| ( Web ) 슬라이드 효과주기 (0) | 2016.04.20 |
RECENT COMMENT