검색결과 리스트
SCRIPT에 해당되는 글 5건
- 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