½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > Ä¿¹Â´ÏƼ > Áú¹®°ú´äº¯ »ó¼¼º¸±â
Ä¿¹Â´ÏƼ ±¸Àα¸Á÷
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
°Ô½ÃÆÇŸÀÌƲ Áú¹®°ú´äº¯ / »ó¼¼º¸±â
Æ®À§ÅÍ·Î º¸³»±â
Ãßõ¼ö 322 | Á¶È¸¼ö 3,739 | µî·ÏÀÏ 2011-03-08 09:58:47

´Ð³×ÀÓ

wonwonk

À̸ÞÀÏ

wonwonkk@nate.com

Á¦¸ñ

½ºÅ©¸³Æ®·Î ¸¸µç À̹ÌÁö ½½¶óÀÌ´õ¿¡¼­.. ¹®Á¦Á¡ ¤Ì¤Ì
³»¿ë

¸ð¹ÙÀÏ ÅÍÄ¡ ½½¶óÀÌ´õ °ü·ÃÀä

 

Ȥ½Ã³ª ¾Æ½Ã´ÂºÐ°è½Ç±î Áú¹®µå·Áº¾´Ï´Ù.

 

view.jsp , Detail.jsp °¡ ÀÖ±¸¿ä

 

view.jsp ¿¡¼­´Â À̹ÌÁö°¡ ¸®½ºÆ®·Î º¸¿©Áö°í

detail.jsp¿¡¼­´Â ½½¶óÀÌ´õ°¡ µÇ´Â »óȲÀÔ´Ï´Ù.

 

 view.jsp ¿¡¼­ À̹ÌÁö¸¦ Å¬¸¯Çؼ­ ³Ñ¾î°¡¸é  detail.jsp¿¡¼­ ±× À̹ÌÁöºÎÅÍ ½½¶óÀÌ´õ°¡ µÇ¾ßµÇ´Â »óȲÀε¥

 

view.jsp ¿¡¼­ ¸®½ºÆ®Áß Ã¹¹ø° À̹ÌÁö¸¦ ¼±ÅÃÇßÀ»¶© detail.jsp¿¡¼­ ½½¶óÀ̵尡 Àß µË´Ï´Ù

Çåµ¥

µÎ¹ø° À̹ÌÁö³ª ±âŸ ´Ù¸¥ À̹ÌÁö¸¦ ¼±ÅÃÇØÁÖ°í ³Ñ¾î°¡¸é

½½¶óÀ̵尡 µÇ±äÇϳª ´ÙÀ½,Àü ¿ä·± À̹ÌÁö°¡ º¸¿©ÁöÁú ¾Ê³×¿ä

 

¼Ò½º ¿Ã·Áº¾´Ï´Ù.

view.jsp ¿¡¼­ ÇÊ¿äÇÑ ¼Ò½º


  function showdetail(ojs){
   var form = document.slist;
   form.mp.value = ojs;
   form.action = "viewDetail.jsp";
   form.submit();
  }

 

 

<td bgcolor="#F4F4F4">»çÁøµé</td>
        <td bgcolor="#FFFFFF">
         <form name="slist" method="get" >
          <input type="hidden" name="mp"/>
          <input type="hidden" name="ps1" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_main"/>" />
          <input type="hidden" name="ps2" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_one"/>" />
          <input type="hidden" name="ps3" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_two"/>" />
          <input type="hidden" name="ps4" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_three"/>" />
          <input type="hidden" name="ps5" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_four"/>" />
          <input type="hidden" name="ps6" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_five"/>" />
          <input type="hidden" name="ps7" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_six"/>" />
          <input type="hidden" name="ps8" value="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_seven"/>" />
         </form>
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_main"/>" onclick="showdetail('ps1');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_one"/>"  onclick="showdetail('ps2');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_two"/>"  onclick="showdetail('ps3');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_three"/>" onclick="showdetail('ps4');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_four"/>" onclick="showdetail('ps5');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_five"/>" onclick="showdetail('ps6');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_six"/>"  onclick="showdetail('ps7');" />
          <img src ="/LGTwinsWEB/teamPhoto/cheersPhoto/<s:property value="resultClass.file_seven"/>" onclick="showdetail('ps8');" />
          
        =================================================

 

detail.jsp ¼Ò½º

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    <%@ taglib prefix="s" uri="/struts-tags" %>
   
 <%
  String mp = request.getParameter("mp");
  String ps1 = request.getParameter("ps1");
  String ps2 = request.getParameter("ps2");
  String ps3 = request.getParameter("ps3");
  String ps4 = request.getParameter("ps4");
  String ps5 = request.getParameter("ps5");
  String ps6 = request.getParameter("ps6");
  String ps7 = request.getParameter("ps7");
  String ps8 = request.getParameter("ps8");
  
  String mps = mp.substring(2,3);
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 </HEAD>
<link rel="stylesheet" type="text/css" href="../css/Site.css" />
<script type="text/javascript" language="javascript" src="../Scripts/zepto.js"></script>
 
<script>
var tmp = 0;
 function showpt(){
  var obs = "<%=mp%>";
  document.getElementById(obs).style.display = "block";
 }

$(document).ready(function () {
    //translate ÁÂÇ¥
    //À̹ÌÁö1°³´ç Å©±â
 var mps = "<%=mps%>" ;

 var x1 = 190 * mps  - 190;
 var w = 190;

  var x = 0;
 
 //width = mps * 190;
    var width = $($("ul img").get(0)).width();

 x = x1;
 width = w;
   
    $("ul").swipeLeft(function (event) {
        if (x == ($(this).width() - $($(this).find("img").get(0)).width())) {
         
            //³¡Á¡¿¡¼­ ¾Æ¹«À̺¥Æ® ¾øÀ½

            event.preventDefault();
           
        }
        else {
            x += width;
            alert("¿À¸¥ÂÊ");
            alert("width°ª "+width);
   alert("x °ª"+ x);
   if(tmp == 0)
   {
    tmp = mps;
   }

   
           // document.getElementById("ps" + tmp).style.display="inline";

            $(this).anim({ translate: '-' + x + 'px, 0px', opacity: 0.5 }, 0.5, 'ease-out').css("opacity", 1);  
   
            tmp = parseInt(tmp)+parseInt(1);
            document.getElementById("ps"+tmp).style.display= "inline";
         
        }
    }).swipeRight(function () {
        if (x == 0) {
            //½ÃÀÛÁ¡¿¡¼­ ¾Æ¹«À̺¥Æ®¾øÀ½

            event.preventDefault();
          
        }
        else {
            x -= width;
            $(this).anim({ translate: '-' + x + 'px, 0px', opacity: 0.5 }, 0.5, 'ease-out').css("opacity", 1);
            alert("¿ÞÂÊ");
        }
    });
}); 

</script>
 <BODY onload="showpt();">
  <div id="wrap">
    <ul>
    <li>  
    <div id ="ps1" style="display:none">                
     <img src ="<%=ps1 %>"  width="190px" height="300px"/>
   </div>
    </li>
    <li>
    <div id ="ps2" style="display:none">
        <img src ="<%=ps2 %>"  width="190px" height="300px"/>
    </div>
    </li>
    <li>
    <div id = "ps3" style="display:none" >
        <img src ="<%=ps3 %>"  width="190px" height="300px"/>
    </div>
    </li>
    <li>
    <div id = "ps4" style="display:none">                   
    <img src ="<%=ps4 %>"  width="190px" height="300px"/>
  </div>
    </li>
    <li>                   
   <div id ="ps5" style="display:none">                   
    <img  src ="<%=ps5 %>"  width="190px" height="300px"/>
  </div>
    </li>
    <li>                   
   <div id ="ps6" style="display:none">                   
    <img src ="<%=ps6 %>"  width="190px" height="300px"/>
  </div>
    </li>
    <li>                   
   <div id = "ps7" style="display:none">                   
    <img src ="<%=ps7 %>"  width="190px" height="300px"/>
  </div>
    </li>
    <li>                   
   <div id ="ps8" style="display:none">                   
    <img  src ="<%=ps8 %>"  width="190px" height="300px"/>
  </div>
    </li>
    </ul>
</div>

 </BODY>
</HTML>

 

ÀߺÎŹµå¸³´Ï´Ù. ¸îÀÏ° ÇظŰí ÀÖ½À´Ï´Ù. ¤Ì¤Ì

À§ ºÓÀº»öÀ¸·Î ÇØ³í ½ºÅ©¸³Æ®¿¡¼­ ¼öÁ¤ÀÌ µÇ¸é µÉ°Å°°Àºµ¥

Àß¾ÈµÇ³×¿ä µµ¿ò±â´Ù·Áº¾´Ï´Ù ¤Ì¤Ì¤Ì

Ãßõ½ºÅ©·¦¼Ò½ºº¸±â ¸ñ·Ï
ÀÌÀü°Ô½Ã±Û java script Áú¹®ÀÔ´Ï´Ù. 2011-03-03 12:57:49
´ÙÀ½°Ô½Ã±Û À̹ÌÁö ¼öÁ¤¹æ¹ý 2011-03-14 11:41:59