상하로 롤링됨. 3개의 이미지 상품을 area map을 이용해서 처리했네요

 

 펌 : http://www.harooya.com/shop/Images/blog/center.html 원본 임.

 

 실행화면

scroll_5.png

 

<html>
<head>
<title>상품스크롤하기</title>
<script language=javascript>
<!--
var downLayerId;
var dropDegree = 5; //스크롤 속도
var doDirect;
var DirectTerm = 4000; //스크롤 지연시간
var curDropIdx = 0;

function DirectDown()
{
clearInterval(doDirect);
clearInterval(downLayerId);

for(i = curDropIdx ;i < document.all["DropHit"].length + curDropIdx;i++){
  document.all["DropHit"][i%document.all["DropHit"].length].style.posTop = document.all["DropHit"][i%document.all["DropHit"].length].style.posHeight * (-1*((i-curDropIdx)%document.all["DropHit"].length));
}
var temp = 'setInterval("DownLayer()",20)';
downLayerId = eval(temp);
direction = "down";
}
function DownLayer()
{
if(document.all["DropHit"][curDropIdx].style.posTop < document.all["DropHit"][curDropIdx].style.posHeight){
  for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
   document.all["DropHit"][j%document.all["DropHit"].length].style.posTop += dropDegree;
  }
}else{
  clearInterval(downLayerId);
  for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
   document.all["DropHit"][j%document.all["DropHit"].length].style.posTop = document.all["DropHit"][j%document.all["DropHit"].length].style.posHeight *((-1*((j-curDropIdx)%document.all["DropHit"].length))+1);
  }
  curDropIdx = (curDropIdx + 1) ;
  curDropIdx = curDropIdx > document.all["DropHit"].length-1 ? curDropIdx%document.all["DropHit"].length:curDropIdx;
  var temp = 'setInterval("DirectDown()",DirectTerm)';
  doDirect = eval(temp);
}
}
function DirectUp()
{
clearInterval(doDirect);
clearInterval(downLayerId);
var tempIdx = 0;
for(i = 0;i<document.all["DropHit"].length;i++){
  tempIdx = (document.all["DropHit"].length + curDropIdx - i) %document.all["DropHit"].length;
  document.all["DropHit"][tempIdx].style.posTop = i*document.all["DropHit"][tempIdx].style.posHeight;
}
var temp = 'setInterval("UpLayer()",20)';
downLayerId = eval(temp);
direction = "up";
}
function UpLayer()
{
var tempIdx = 0;
if(document.all["DropHit"][curDropIdx].style.posTop < document.all["DropHit"][curDropIdx].style.posHeight && document.all["DropHit"][curDropIdx].style.posTop > document.all["DropHit"][curDropIdx].style.posHeight * (-1)){
  for(j = 0 ;j < document.all["DropHit"].length;j++){
   tempIdx = (document.all["DropHit"].length + curDropIdx - j) %document.all["DropHit"].length;
   document.all["DropHit"][tempIdx].style.posTop -= dropDegree;
  }
}else{
  clearInterval(downLayerId);
  for(j = 0;j<document.all["DropHit"].length;j++){
   tempIdx = (document.all["DropHit"].length + curDropIdx - j) % document.all["DropHit"].length;
   document.all["DropHit"][tempIdx].style.posTop = (j-1)*(document.all["DropHit"][tempIdx].style.posHeight);
  }
  curDropIdx = (curDropIdx - 1) ;
  curDropIdx = curDropIdx < 0 ? document.all["DropHit"].length-1:curDropIdx;
  var temp = 'setInterval("DirectUp()",DirectTerm)';
  doDirect = eval(temp);
}
}
//-->
</script>
</head>
<!-- 파일시작-->
<body onLoad="DirectDown();"  >
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td>
  <div style="left:0px; overflow:hidden; width:520px; position:relative; top:0px; height:224px">
   <div id=DropHit style="width:520px; height:224px; position:absolute; left:0px; top:0px; z-index:1; visibility:visible;">
    <table border=0 cellpadding=0 cellspacing=0 width=520>
    <tr>
     <td><a href="http://www.harooya.com" target="_blank"><img src="http://harooya.imgmall.co.kr/tistory/scroll.jpg" width="520" height="224" border="0" usemap="#scroll"></a></td>   
    </tr>
    </table>
   </div>
   <div id=DropHit style="width:520px; height:224px; position:absolute; left:0px; top:-100px; z-index:1; visibility:visible;">
    <table border=0 cellpadding=0 cellspacing=0 width=520>
    <tr>
     <td><a href="http://www.harooya.com" target="_blank"><img src="http://harooya.imgmall.co.kr/tistory/scroll1.jpg" width="520" height="224" border="0" usemap="#scroll1"></a></td>
  
    </tr>
    </table>
   </div>
  </div>
</td>
<td>
  <table cellspacing=0 cellpadding=0 width=30 border=0>
  <tr><td><a href="javascript:DirectUp("><img border=0 src="http://harooya.imgmall.co.kr/tistory/up.gif></a></td></tr>
    <tr><td align=center><img height=150 width=1 src=binimg.gif></td></tr>
  <tr><td><a href="javascript:DirectDown()"><img border=0 src="http://harooya.imgmall.co.kr/tistory/down.gif></a></td></tr>
  </table>

<!-- 파일끝-->

</td>
</tr>
</table>
<map name="scroll">
<area shape="rect" coords="10,10,162,214" href="http://www.harooya.com/FrontStore/iGoodsView.phtml?iCategoryId=64&iCategoryIdMain=64&iGoodsId=THA13&iCurrentPage=1" target="_blank">
<area shape="rect" coords="181,11,340,213" href="http://www.harooya.com/FrontStore/iGoodsView.phtml?iCategoryId=65&iCategoryIdMain=65&iGoodsId=TIDININGTABLE&iCurrentPage=1" target="_blank">
<area shape="rect" coords="354,5,516,216" href="http://www.harooya.com/FrontStore/iGoodsView.phtml?iCategoryId=64&iCategoryIdMain=64&iGoodsId=THA26&iCurrentPage=1" target="_blank">
</map>

<map name="scroll1">
<area shape="rect" coords="7,7,159,214" href="http://www.harooya.com/FrontStore/iGoodsList.phtml?iCategoryId=66" target="_blank">
<area shape="rect" coords="179,7,340,214" href="http://www.harooya.com/FrontStore/iGoodsView.phtml?iCategoryId=64&iCategoryIdMain=64&iGoodsId=A31T&iCurrentPage=1" target="_blank">
<area shape="rect" coords="354,4,513,218" href="http://www.harooya.com/FrontStore/iGoodsView.phtml?iCategoryId=62&iCategoryIdMain=62&iGoodsId=THA25&iCurrentPage=1" target="_blank">
</map>


</body>
</html>