블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

 «  » 2025.1
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
반응형

Category

Recent Post

Recent Comment

Archive

2009. 11. 12. 14:36 .Net Project/Jquery 1.3.2

54장 JQueryEffect 슬라이더 처리 (SlideExample)

반응형
 SlideExample1.htm
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Example</title>

  <style type="text/css">

  div {

    position:absolute;

    background-color:#abc;

    left:50px;

    width:90px;

    height:90px;

    margin:5px;

  }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

 

  <script type="text/javascript">

      $(document).ready(function () {

 

          $("#right").click(function () {

              $(".block").animate({ "left": "+=50px" }, "slow");

          });

 

          $("#left").click(function () {

              $(".block").animate({ "left": "-=50px" }, "slow");

          });

 

      });

  </script>

 

</head>

<body>

  <button id="left">«®i</button>

  <button id="right">»®i</button>

<div class="block"></div>

 

</body>

</html>

 

 


 SlideExample2.htm
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

 <style type="text/css">

  div {

    background-color:#bca;

    width:200px;

    height:1.1em;

    text-align:center;

    border:2px solid green;

    margin:3px;

    font-size:14px;

  }

  button {

    font-size:14px;

  }

  </style>

 

  <script src="http://code.jquery.com/jquery-latest.js"></script>

 

  <script type="text/javascript">

      $(document).ready(function () {

 

          $("#go1").click(function () {

              $("#block1").animate({ width: "90%" },
               { queue: false, duration: 3000 })

         .animate({ fontSize: "24px" }, 1500)

         .animate({ borderRightWidth: "15px" }, 1500);

          });

 

          $("#go2").click(function () {

              $("#block2").animate({ width: "90%" }, 1000)

         .animate({ fontSize: "24px" }, 1000)

         .animate({ borderLeftWidth: "15px" }, 1000);

          });

 

          $("#go3").click(function () {

              $("#go1").add("#go2").click();

          });

 

          $("#go4").click(function () {

              $("div").css({ width: "", fontSize: "", borderWidth: "" });

          });

 

      });

  </script>

 

</head>

<body>

  <button id="go1">» Animate Block1</button>

  <button id="go2">» Animate Block2</button>

  <button id="go3">» Animate Both</button>

  <button id="go4">» Reset</button>

  <div id="block1">Block1</div>

  <div id="block2">Block2</div>

</body>

</html> 









반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

56장 JQueryEffect 트리 뷰 효과 (TreeView)  (0) 2009.11.12
55장 JQueryEffect 에니메이션 효과 정지 (Stop)  (0) 2009.11.12
53장 JQueryEffect 여러가지 효과 동시처리 (Animate)  (0) 2009.11.12
52장 JQueryEffect 보이기/숨기기 (SlideUp)  (0) 2009.11.12
51장 JQueryEffect 보이기/숨기기 (FadelnFadeOut)  (0) 2009.11.12
posted by Magic_kit
2009. 11. 12. 14:33 .Net Project/Jquery 1.3.2

53장 JQueryEffect 여러가지 효과 동시처리 (Animate)

반응형
 Animate.htm
 간단설명)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd">

<html> 

<head>

<title> 여러가지 효과를 동시에 처리 </title>

<style type="text/css">

  div {

    background-color:#bca;

    width:100px;

    border:1px solid green;

  }

  </style>

 

  <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

  <script type="text/javascript">

      $(document).ready(function () {

 

          // Using multiple unit types within one animation.

          $("#go").click(function () {

              $("#block").animate({

                  width: "70%",

                  opacity: 0.4,

                  marginLeft: "0.6in",

                  fontSize: "3em",

                  borderWidth: "10px"

              }, 1500);

          });

 

      });

  </script>

 

</head>

<body>

  <button id="go">» Run</button>

  <div id="block">Hello!</div>

</body>

</html>






반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

55장 JQueryEffect 에니메이션 효과 정지 (Stop)  (0) 2009.11.12
54장 JQueryEffect 슬라이더 처리 (SlideExample)  (0) 2009.11.12
52장 JQueryEffect 보이기/숨기기 (SlideUp)  (0) 2009.11.12
51장 JQueryEffect 보이기/숨기기 (FadelnFadeOut)  (0) 2009.11.12
50장 JQueryEffect 서버 보이기/숨기기 (ShowHide)  (0) 2009.11.12
posted by Magic_kit
2009. 11. 12. 14:31 .Net Project/Jquery 1.3.2

52장 JQueryEffect 보이기/숨기기 (SlideUp)

반응형
 SlideUp.htm
 간단설명)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> 보이기 숨기기 </title>

    <style type="text/css">

        #my .hover {cursor:pointer; background-color:Yellow;}

    </style>

   

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#btn").click(function () {

                $("#first")

                    .fadeIn('slow') //보이기
                    .slideUp('slow'); // 슬라이드업 : 숨기기

                });

        });

   

    </script>

</head>

<body>

<input type ="button" id="btn"  value="슬라이드 업" />

 

<div class="region" style="display:none;">

안녕하세요 여기는 기본 문서 입니다

<span class="more">more...</span>

 

</div>

<div id="moreRegion" style="height:100px; background-color:Yellow;">

또 만나요

</div>

 

</body>

</html> 


SlideToggle
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Slide Toggle</title>

     

    <style type="text/css">

        #my .hover {cursor:pointer; background-color:Yellow;}

    </style>

       

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#btn").click(function () {

                //숨김 -> 보임 -> 숨김

                $("$first").slideToggle('slow');

         

            });

 

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="슬라이드 토글" />

<div id="first" style="display:none; background-color:Yellow;height:100px;">

첫번째 영역

</div>

 

</body>

</html> 








반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

54장 JQueryEffect 슬라이더 처리 (SlideExample)  (0) 2009.11.12
53장 JQueryEffect 여러가지 효과 동시처리 (Animate)  (0) 2009.11.12
51장 JQueryEffect 보이기/숨기기 (FadelnFadeOut)  (0) 2009.11.12
50장 JQueryEffect 서버 보이기/숨기기 (ShowHide)  (0) 2009.11.12
49장 JQueryEvent 동적으로 다른 이벤트 호출 (Unbind)  (0) 2009.11.12
posted by Magic_kit
2009. 11. 12. 14:28 .Net Project/Jquery 1.3.2

51장 JQueryEffect 보이기/숨기기 (FadelnFadeOut)

반응형
 FadenInFadeOut.htm
 간단 설명 )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> 보이기 숨기기 </title>

    <style type="text/css">

        #my .hover {cursor:pointer; background-color:Yellow;}

    </style>

   

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".region").show(); //region 영역 보이기            $("#moreRegion").hide(); //more.. 숨기기
            //more.. 클릭시 보이기 및 숨기기
            $("span.more").click(function () {

                $("#moreRegion").show('slow'); //천천히 보이기

                             //숫자 값이나 문자의 값 입력 가능  

                $(this).hide('fast'); //more 버튼의 숨기기

            });

        });

   

    </script>

</head>

<body>

<div class="region" style="display:none;">

안녕하세요 ...본문 내용입니다

<span class="more">more...</span>

 

</div>

<div id="moreRegion" style="height:100px; background-color:Yellow;">

또또또 만나요

</div>

 

</body>

</html>








반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

53장 JQueryEffect 여러가지 효과 동시처리 (Animate)  (0) 2009.11.12
52장 JQueryEffect 보이기/숨기기 (SlideUp)  (0) 2009.11.12
50장 JQueryEffect 서버 보이기/숨기기 (ShowHide)  (0) 2009.11.12
49장 JQueryEvent 동적으로 다른 이벤트 호출 (Unbind)  (0) 2009.11.12
48장 JQueryEvent 동적으로 다른 이벤트 호출 (Trigger)  (0) 2009.11.12
posted by Magic_kit

티스토리툴바