English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 현재 위치
  2. 홈페이지
  3. 경험 기록
  4. 본문

jQuery 효과 함수에 대해 간단히 이야기

jQuery는 다양한 효과를 구현할 수 있습니다. 예를 들어, 흐림 효과를 구현할 수 있습니다：<html>

 <head>
    <style>
      #box{width:200px;height:200px;background:red;불투명도:1;}
    </style>
  </head>
  <body>
    <div id="box">
    </div>
    <input type="button" value="숨기기/보이게 해"id="bt1">/><br/>
    <input type="button" value="가려지게 해"id="bt2">/><br/>
    <input type="button" value="가려져 있음"id="bt3">/><br/>
    <input type="button" value="가려지게 해"id="bt4">/><br/>
    <input type="button" value="가려져 있음"id="bt5">/><br/>
    <input type="button" value="반투명"id="bt6">/><br/>
    <input type="button" value="가려지게 해"/가려져 있음"id="bt7">/><br/>
    <input type="button" value="가려지게 해"/가려져 있음"id="bt7">/><br/>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $(function(){
        $("#bt1").click(function(){
              $("#box").toggle(1000)
              }),
        $("#bt2").click(function(){
              $("#box").slideDown(1500)
              }),
        $("#bt3").click(function(){
              $("#box").slideUp(1500)
              }),
        $("#bt4").click(function(){
              $("#box").fadeIn(1000)
              }),
        $("#bt5").click(function(){
              $("#box").fadeOut(1000)
              }),
        $("#bt6").click(function(){
              $("#box").fadeTo(1500,0.4)
              }),
        $("#bt7").click(function(){
              $("#box").fadeToggle(1000)
              }),
        $("#bt8").click(function(){
              $("box").slideToggle(1500)
              })
        })
  </script>
</html>

jQuery는 스크롤 타이틀 효과를 구현할 수 있습니다, 예를 들어 아래 예제:<html>

<head>
    <style>
      #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $(function(){
        str="저는 중국인입니다"
        $("#box").html(str)
        setInterval(go,300)
          function go(){
            str=str.substr(1)+str.substr(0,1)
            $("#box").html(str)
            }  
      })
  </script>
</html>

jQuery는 삭제 기능 구현을 위해 사용될 수 있습니다, 예를 들어：<html>

<head>
    <style>
      #box{
        width:400px;
        height:200px;
        border:1px solid black;
        }
    </style>
  </head>
  <body>
    <div id="box">
        <p id="a">첫 번째a</p>
        <p>두 번째</p>
        <p id="a">세 번째a</p>
        <p>네 번째</p>
    </div>
    <button id="del">삭제</button>
    <button id="cle">비우기</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $(function(){
        $("#del").click(
            function(){
              $("p").remove("#a")
              });
        $("#cle").click(
            function(){
              $("#box").empty()
              });
      })
  </script>
</html>

jQuery는 강의 선택 기능 구현을 위해 사용될 수 있습니다, 예를 들어:<html>

<head>
<title></title>
<style>
li{
  list-style:none;
}
#you{
  position:absolute;
  left:300px;
  top:10px;
}
ul{
  position:absolute;
  left:150px;
  top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
  $(function(){
    $("button:first").click(function(){
      $("#zuo>option:selected").prependTo($("#you"));
      //$("#you").append($("#zuo>option:selected");
    })
    $("button:eq("1})
      $("#you>option:selected").appendTo($("#zuo"));
      //$("#you").append($("#zuo>option:selected");
    })
    $("button:eq("2})
      $("#zuo>option").appendTo($("#you"));
    })
    $("button:eq("3})
      $("#you>option").appendTo($("#zuo"));
    })
    $("button:eq("4})
       //$("#zuo>option:first").before($("#zuo>option:selected"))
      $("#zuo>option:selected").prependTo($("#zuo"));
    })
    $("button:eq("5})
      // $("#zuo>option:last").after($("#zuo>option:selected"))
      $("#zuo>option:selected").appendTo($("#zuo"));
    })
    $("button:eq("6})
     $("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;  
    })
    $("button:eq("7})
     $("#zuo>option:selected").next().after($("#zuo>option:selected")) ;  
    })
  })
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
  <option>직장인 영어/option>
  <option>고급 수학/option>
  <option>대학 중국어/option>
  <option>대학 물리학/option>
  <option>컴퓨터 기초/option>
  <option>기본 웹 설계/option>
  <option>C언어 프로그래밍/option>
  <option>데이터 구조/option>
  <option>UI 설계/option>
  <option>제품 스크립트 설계/option>
  <option>제품 스크립트 향상/option>
  <option>제품 스크립트 실전/option>
</select>
<ul>
<li><button>선택/button></li>
<li><button>선택 해제/button></li>
<li><button>모두 선택/button></li>
<li><button>모두 내려/button></li>
<li><button>시작으로/button></li>
<li><button>끝으로/button></li>
<li><button>올라/button></li>
<li><button>내려/button></li>
</ul>
<select size="10" id="you" style="width:100px">
</select>
</body>
</html>

jQuery가 내려오는 패널 기능을 구현할 수 있습니다:<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$("document").ready(function(){
 $(".flip").click(function(){
  $(".panel").slideDown("slow");
 });
});
</script>
<style type="text"}/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>W3School，你所需要的所有网站建设教程都可以在这里找到。</p>
</div>
<p class="flip">여기를 클릭하세요</p>
</body>
</html>
jQuery는 간단한 애니메이션 효과를 구현할 수 있습니다：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({left:'250px'});
 });
});
</script> 
</head>
<body>
<button>시작 애니메이션</button>
<p>기본적으로 모든 HTML 요소의 위치는 정적이며 이동할 수 없습니다. 위치를 조작하려면, 먼저 요소의 CSS position 속성을 relative, fixed 또는 absolute로 설정하십시오.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery는 애니메이션의 시작과 중지 기능을 구현할 수 있습니다:<html>
  <head>
    <style>
      #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
    <button id="bt">시작</button>
    <button id="bt1">중지</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $(function(){
        $("#bt").click(function(){
              $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
              }),
        $("#bt1").click(function(){
              $("div").stop();
              })      
        })
  </script>
</html>

jQuery는 상향식 이미지 광고 기능을 할 수 있습니다:<html>

<head>
    <style>
      #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
      ul{list-style:none;}
      img{width:600px;height:300px;}
      *{padding:0;margin:0;}
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="pic">
        <li><img src="1.png"></li>
        <li><img src="2.png"></li>
        <li><img src="3.png"></li>
        <li><img src="4.png"></li>
        <li><img src="1.png"></li>
      </ul>
    </div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $(function(){
        m=0;
        p=setInterval(go,100)
        function go(){
            m+=20;
            $("#pic").css("margin-top",-m+"px")
            if(m>=1200){m=0}
            }
      })
  </script>
</html>

jQuery는 두 개의 드롭다운 확장 및 축소 효과를 하나로 통합할 수 있습니다:<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
 {
 $("button").click(function(){
  $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 });
});
</script>
</head>
<body>
<p id="p1">jQuery가 너무 재미있어요!</p>
<button>여기를 클릭하세요</button>
</body>
</html>

이것이 저가 여러분에게 공유한 모든 것이며, 감사합니다.

이 jQuery 효과 함수는 저가 여러분에게 공유한 모든 내용입니다. 여러분에게 참고가 되길 바라며, 다들 지지와 외침 교육을 많이 지지해 주셔서 감사합니다.

기본 튜토리얼
추천해드립니다