½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > JQuery > Jquery ¿Í CSS ¸¦ ÀÌ¿ëÇÑ °¡·Î ½½¶óÀ̵ù ¹è³Ê »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Jquery ¿Í CSS ¸¦ ÀÌ¿ëÇÑ °¡·Î ½½¶óÀ̵ù ¹è³Ê
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
·©Å·BEST
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù JQuery
´Ù¿î·Îµå Ƚ¼ö 2934 ȸ
°£´Ü¼³¸í Jquery ¿Í CSS ¸¦ ÀÌ¿ëÇÏ¿© °£´ÜÇÑ °¡·Î ½½¶óÀ̵ù ¹è³Ê¸¦ Á¦ÀÛÇÒ ¼ö ÀÖ½À´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â°¡ ¾ø½À´Ï´Ù ½ºÅ©·¦Çϱâ


Jquery ¿Í CSS ¸¦ ÀÌ¿ëÇÏ¿© °£´ÜÇÑ °¡·Î ½½¶óÀ̵ù ¹è³Ê¸¦ Á¦ÀÛÇÒ ¼ö ÀÖ½À´Ï´Ù.

´ë·«ÀûÀÎ ÀÛ¾÷ ¼ø¼­´Â ¾Æ·¡¿Í °°À¸¸ç, ÷ºÎÆÄÀÏÀ» ´Ù¿î·Îµå ¹Þ¾Æ È®ÀÎÇϽøé Á» ´õ ÀÌÇØ°¡ ºü¸¨´Ï´Ù. ^^



1. HTML ÆÄÀϳ»¿¡ <DIV> ű׸¦ ¾Æ·¡¿Í °°Àº ±¸Á¶°¡ µÇµµ·Ï ÀÛ¼ºÇÕ´Ï´Ù.


¿¹Á¦ ¼Ò½º)

<div id="warp">
  <div id="mask">
   <div id="content">
    <dl>
     <dt>
      <dd><img src="img/dog01.jpg"></dd>
      <dd><img src="img/dog02.jpg"></dd>
      <dd><img src="img/dog03.jpg"></dd>
      <dd><img src="img/dog04.jpg"></dd>
      <dd><img src="img/dog05.jpg"></dd>
      <dd><img src="img/dog06.jpg"></dd>
      <dd><img src="img/dog07.jpg"></dd>
     </dt>
    </dl>
   </div>
  </div>
 </div>




2. ¹è³ÊµéÀº <dd> ű׸¦ ÀÌ¿ëÇÏ¿© Âß ÀÔ·ÂÇÑ ´ÙÀ½

½ºÅ¸ÀÏ(float:left) À» ÅëÇØ ¿ÞÂÊÀ¸·Î ºÙ¿© ÇÑÁÙÀÌ µÇµµ·Ï ÇØÁÝ´Ï´Ù.


¿¹Á¦ ¼Ò½º)
#content dd { float:left; width:400px; height:200px; }





3. CSS ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÏ¿© mask ¿µ¿ª ¾È¿¡ ÀÖ´Â content ³»¿ë¸¸ º¸À̵µ·Ï

mask ¿µ¿ª¿¡µµ ½ºÅ¸ÀÏÀ» Á¤ÀÇÇØ ÁÝ´Ï´Ù.


¿¹Á¦ ¼Ò½º)
#mask { float:left; overflow:hidden; width:400px; height:200px; }




4. ¼Ò½º »ó´Ü¿¡ Jquery ÆÄÀÏÀ» ¸µÅ©ÇØ ÁÝ´Ï´Ù.

¿¹Á¦ ¼Ò½º)
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>




5. ÁÂ,¿ìÃø Ŭ¸¯½Ã ½ÇÇàµÇµµ·Ï ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö¸¦ Á¤ÀÇÇØ ÁÝ´Ï´Ù.

¿¹Á¦ ¼Ò½º)
 <script type="text/javascript">

  var divWidth  = "400"; //¹è³Ê 1°³ °¡·ÎÅ©±â

  //ÀÌÀü
  function prev()
  {
   $("#content").stop(true,true);

   var moveX   = parseInt($("#content").css("margin-left"));

   if( moveX < 0 )
   {
    $("#content").animate({"margin-left":"+=" + divWidth + "px"},500);
   }
   else
   {
    alert("óÀ½ ÀÔ´Ï´Ù.");
    return;
   }
  }

  //´ÙÀ½
  function next()
  {
   $("#content").stop(true,true);

   var hiddenWidth  = ($("#content dd").length-1)*(-divWidth);
   var moveX   = parseInt($("#content").css("margin-left")) ;
   var lastWidth  = ( moveX - divWidth );

   if( hiddenWidth < moveX )
   {
    $("#content").animate({"margin-left":"-=" + divWidth + "px"},500);
   }
   else
   {
    alert("¸¶Áö¸· ÀÔ´Ï´Ù.");
    return;
   }
  }
 </script>



6. mask ¿µ¿ª Á¿ì·Î ¹öÆ°À» ³Ö¾îÁÖ°í ½ºÅ¸ÀÏÀ» Á¤ÀÇÇØ ÁÝ´Ï´Ù.

¿¹Á¦ ¼Ò½º)
#prevbtn { float:left; cursor:pointer; position:relative; top:90px; width:14px; height:28px; padding-right:20px; }
#nextbtn { float:left; cursor:pointer; position:relative; top:90px; width:14px; height:28px; padding-left:20px; }

<div id="prevbtn" onclick="prev()"><img src="img/prev_img.gif" ></div>
<div id="nextbtn" onclick="next()"><img src="img/next_img.gif"></div>



7. ºê¶ó¿ìÀú¸¦ ÅëÇØ È®ÀÎ ÇÕ´Ï´Ù.


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
Á¦°¡»çÀÌÁ ´Ã·Á¼­ ÀÀ¿ëÀ» Çغ¼·Á°íÇϴµ¥¿ä ¤Ì¤Ì »çÀÌÁî°¡ 1280 388 Àε¥ ±×´ÙÀ½À̹ÌÁö¸¦ ³Ñ±â´Ï±ñ ¹Ý¸¸³Ñ¾î°¡°í ´õÀÌ»ó¾È³Ñ¾î°¡´õ¶ó±¸¿ä ¤Ì¤Ì ¾î¶»°Ô Çؾߵdzª¿ä??
2014-02-17 16:05:30
mwdkim
Âù¼º 109
¹Ý´ë 101
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 28812243 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.