API tools faq
paste
asimryu

첫번째 jQuery(fadeIn/Out)

asimryu
Apr 1st, 2015
362
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.52 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="ko">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>윤남조</title>
  6.  
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.         }
  11.         #wrap {
  12.             margin: 0 auto;
  13.             width: 1200px;
  14.             height: 1300px;
  15.         }
  16.         header {
  17.             width: 1150px;
  18.             height: 30px;
  19.             background-color: #333;
  20.             text-align: right;
  21.             padding-right: 50px;
  22.         }
  23.         header a {
  24.             color: #fff;
  25.             text-decoration: none;
  26.             line-height: 30px;
  27.             font-size: 0.8em;
  28.             font-weight: bold;
  29.             padding: 5px;
  30.         }
  31.         nav {
  32.             width: 100%;
  33.             height: 80px;
  34.             background-color: yellow;
  35.             border-bottom: 2px solid #333;
  36.         }
  37.         #logo {
  38.             float: left;
  39.             width: 300px;
  40.             height: 70px;
  41.             padding-top: 10px;
  42.             text-align: center;
  43.         }
  44.         #menu {
  45.             float: left;
  46.             width: 900px;
  47.             height: 80px;
  48.             text-align: center;
  49.             line-height: 80px;
  50.         }
  51.         #menu a {
  52.             text-decoration: none;
  53.             color: #333;
  54.             font-weight: bold;
  55.             font-size: 0.9em;
  56.             padding: 0 10px;
  57.         }
  58.         #visual {
  59.             border-bottom: 2px solid #333;
  60.             width:1200px;
  61.             height:350px;
  62.             overflow: hidden;
  63.         }
  64.         .link {
  65.             width: 100%;
  66.             height: 70px;
  67.             background-color: #333;
  68.         }
  69.         .link span {
  70.             padding: 0 0 0 30px;
  71.             line-height: 70px;
  72.             font-weight: bold;
  73.             color: #fff;
  74.             font-size: 20px;
  75.         }
  76.         .link-bottom{
  77.             width: 1200px;
  78.             height: 245px;
  79.             border-bottom: 5px solid #333;
  80.         }
  81.         .link-bottom div {
  82.             float: left;
  83.             width: 300px;
  84.             height: 245px;
  85.         }
  86.         .blue {
  87.             background-color: blue;
  88.         }
  89.         .red {
  90.             background-color: red;
  91.         }
  92.         .yellow {
  93.             background-color: yellow;
  94.         }
  95.         .green {
  96.             background-color: green;
  97.         }
  98.         .bottom {
  99.             width: 1200px;
  100.             height: 400px;
  101.         }
  102.         .left {
  103.             float: left;
  104.             width: 400px;
  105.             height: 400px;
  106.         }
  107.         .left-top {
  108.             width: 400px;
  109.             height: 100px;
  110.             background-color: yellow;
  111.         }
  112.         .left-bottom {
  113.             width: 400px;
  114.             height: 300px;
  115.             background-color: green;
  116.         }
  117.         .center {
  118.             float: left;
  119.             width: 400px;
  120.             height: 400px;
  121.             background-color: blue;
  122.         }
  123.         .right {
  124.             float: left;
  125.             width: 400px;
  126.             height: 400px;
  127.             background-color: red;
  128.         }
  129.         .footer {
  130.             width: 1200px;
  131.             height: 50px;
  132.         }
  133.         .footer-top {
  134.             margin: 0 auto;
  135.             width: 800px;
  136.             height: 50px;
  137.             background-color: yellow;
  138.         }
  139.         .footer-center {
  140.             margin: 0 auto;
  141.             text-align: center;
  142.         }
  143.         .footer-center span {
  144.             padding: 20px;
  145.             font-size: 10px;
  146.         }
  147.         .footer-bottom {
  148.             margin: 0 auto;
  149.             text-align: center;
  150.         }
  151.         .footer-bottom span {
  152.             font-size: 10px;
  153.         }
  154.     </style>
  155.     <script src="jquery-1.11.2.js"></script>
  156.  
  157.  </head>
  158.  <body>
  159.  
  160.     <div id="wrap">
  161.         <header>
  162.             <a href="">언어변경</a>
  163.             <a href="">숙련기술 장터</a>
  164.             <a href="">국제협력</a>
  165.             <a href="">로그인</a>
  166.         </header>
  167.         <nav>
  168.             <div id="logo">
  169.                 <img src="http://lorempixel.com/180/60/food" alt="로고">
  170.             </div>
  171.             <div id="menu">
  172.                 <a href="">글로벌진흥원소개</a>
  173.                 <a href="">숙련기술전수</a>
  174.                 <a href="">기능경기</a>
  175.                 <a href="">전수신청</a>
  176.             </div>
  177.         </nav>
  178.         <section id="visual">
  179.             <img id="img1" src="http://lorempixel.com/1200/350/nature" alt="그림1">
  180.             <img id="img2" src="http://lorempixel.com/1200/350/food" alt="그림2">
  181.             <img id="img3" src="http://lorempixel.com/1200/350/sports" alt="그림3">
  182.             <img id="img4" src="http://lorempixel.com/1200/350/city" alt="그림4">
  183.         </section>
  184.         <div class="link">
  185.             <span>바로가기</span>
  186.         </div>
  187.         <div class="link-bottom">
  188.             <div class="blue"></div>
  189.             <div class="red"></div>
  190.             <div class="yellow"></div>
  191.             <div class="green"></div>
  192.         </div>
  193.         <div class="bottom">
  194.             <div class="left">
  195.                 <div class="left-top"></div>
  196.                 <div class="left-bottom"></div>
  197.             </div>
  198.             <div class="center"></div>
  199.             <div class="right"></div>
  200.         </div>
  201.         <div class="footer">
  202.             <div class="footer-top"></div>
  203.             <div class="footer-center">
  204.                 <span>개인정보 취급방침</span>
  205.                 <span>찾아오시는 길</span>
  206.                 <span>도로명 주소안내</span>
  207.                 <span>저작권보호 정책</span>
  208.             </div>
  209.             <div class="footer-bottom">
  210.                 <span>Copyright 2013(c) Global Lnatitute For Tranaferring Skills All rights reserved</span>
  211.             </div>
  212.         </div>
  213.  
  214.     </div>
  215.     <script>
  216.         var pn = 1;
  217.         var timer = setInterval( function(){
  218.             $("#img" + pn).fadeOut("slow");
  219.             pn = pn + 1;
  220.             if( pn > 4 ) pn = 1;
  221.             $("#visual img").hide();
  222.             //$("#img" + pn).show();
  223.             //$("#img" + pn).slideDown("slow");
  224.             $("#img" + pn).fadeIn("slow");
  225.         },3000 );
  226.     </script>
  227.  </body>
  228. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!