( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트 Programing/Web 2016. 4. 27. 14:36







아.... 이건... 정말... 제가 심플하게... 만든거에요...

그냥...저냥...정말 심플하면서....급하게...

....

.......다음엔 퀄리티 높게 할께요 ㅠㅠ



1. 완성본





2. 소스부분

  1. CSS 부분

view source
print?
01.<style>
02.    html, body {
03.        margin: 0;
04.    }
05. 
06.    .ColorPikerBody {
07.        width: 350px;
08.        height: 176px;
09.        border: 1px;
10.        border-style: dotted;
11.    }
12. 
13.    .ColorPik {
14.        margin: auto;
15.        width: 350px;
16.    }
17. 
18.    .ColorPik div {
19.        width: 35px;
20.        height: 35px;
21.        line-height: 35px;
22.        float: left;
23.        cursor: pointer;
24.    }
25. 
26.    .ColorView {
27.        width: 19px;
28.        height: 19px;
29.        float: left;
30.        margin-right: 10px;
31.        border: 1px;
32.        border-style: dotted;
33.    }
34.</style>



  2. javascript 부분

view source
print?
01.<!-- jquery 파일은 다운받아서 쓰세용 -->
02.<script src='http://xline.dothome.co.kr/_Js/JQuery/jquery-2.2.2.js'></script>
03.<script>
04.    function colorPickUp() {
05.        if($('.ColorPikerBody').css("display") == "none"){
06.            $('.ColorPikerBody').css("display", "block");
07.            $('.ColorPik')[0].innerHTML = "";
08.            for(var i=0; i< 5; i++){
09.                for(var j=0; j<10; j++){
10.                    var InColorPick = Math.random().toString(16).replace(/.*(\w{6})/, '#$1');
11.                    $('.ColorPik')[0].innerHTML += "<div class='cPick_1' coloTump='"+InColorPick+"' style='background-color: "+InColorPick+";''></div>";
12.                }
13.            }
14.            $('[class^="cPick_"]').hover(
15.                function(){
16.                    $('.ColorView').css("background-color", $(this).attr("coloTump"));
17.                    $('#inputColor').val($(this).attr("coloTump"));
18.                }
19.            );
20.            $('[class^="cPick_"]').click(function(){
21.                $('.ColorPikerBody').css("display", "none");
22.                $('#inputColor').val($(this).attr("coloTump"));
23.            });
24.        }else{
25.            $('.ColorPikerBody').css("display", "none");
26.        }
27.    }
28.</script>



  3. html 부분

view source
print?
1.<input type='text' id='inputColor' name='inputColor' size='7' onclick='colorPickUp(); return false;' value='Click'/><div class='ColorView'></div>
2.<div class="ColorPikerBody" style="display:none">
3.    <div class='ColorPik'></div>
4.</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
,

티스토리툴바