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

jQuery로 구현된 오른쪽 하단 광고 창 추적 효과의 예제

本文实例讲述了jQuery实现的右下角广告窗体跟随效果。分享给大家供大家参考。具体如下:

<!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">
    body{margin:0px;font-size:12px;}
    #message
    {
      width:100px;
      height:100px;
      position:fixed;
      background-color:gold;
      right:0px;
      bottom:0px;
      display:none;
    }
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      //주의! slideDown은 펼치는 것이며, slideUp은 축소하는 것입니다
      $("#message").slideDown(2000, function () {
        //$(this).slideUp(5000);   //꽃5초 후 축소
        setTimeout("$('#message').slideUp(5000);",2000)   //타이머를 사용하여 2초 후에 축소하십시오, 여기서는 $(this)를 사용할 수 없으며, 반드시 ID를 사용하여 가져오셔야 합니다
      });
    });
  </script>
</head>
<body>
  <div id="message">
    저는 광고입니다, 죄송합니다!!
  </div>
</body>
</html>

jQuery 관련 내용에 대해 더 알고 싶은 독자는 다음 사이트의 특辑을 확인할 수 있습니다: 《jQuery 확장 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery 드래그 앤 드롭 효과 및 기술 요약》、《jQuery 테이블(table) 작업 기술 요약》、《jQuery Ajax 사용 방법 요약》、《jQuery 일반 클래식 효과 요약》、《jQuery 애니메이션 및 효과 사용 방법 요약》 및 《jQuery 선택자 사용 방법 요약》

이 문서에서 설명한 내용이 jQuery 프로그램 설계에 도움이 되길 바랍니다.

고지사항: 이 문서의 내용은 인터넷에서 가져온 것으로, 저작권자는 본인입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집한 것이 아니며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용이 발견되면 이메일을 보내 주시기 바랍니다: notice#oldtoolbag.com(이메일을 보내는 경우, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 실제로 확인된 경우 이 사이트는 즉시 위반된 내용을 제거합니다。)

추천 합니다