jquery 위아래 롤링(rolling) | Client Side

이미지나 내용 들이 위아래로 롤링되는  jQuery 임.

이거 별로 추천하진 않음.. 조금 지저분 하기 때문에..

내가 이코드가 어서 난건지도 모르겠음 내가 만든게 아니라..

허나 작동은 잘 하니..흠흠..;;;;

 

우선 첨부파일 부터

rolling.zip

 

그리고 스크립트는..

 

$(function() {
 var content = " ";
 var rollingDiv = $("#rolling");
 
rollingDiv.rolling("up", 250, 65); //위로 올라가질 밑으로 갈지 결정,가로사이즈,세로사이즈

 var tname = $("textarea","#rollingId")
 var cnt = tname.length; // 롤링갯수 세려고
 
 var f = document.rollingForm;
 if(cnt == 1){ // 1개일때는 롤링을 하지 않는다.
   
var item = eval("f.item0.value"); 
   rollingDiv.html(jQuery.trim(item));

 }else{

  for (var i = 0; i < cnt; i++) {
    var item = eval("f.item" + i + ".value");
    if (item != "") {
      rollingDiv.addRollingItem(jQuery.trim(item));
      content += "rollingDiv.addRollingItem(\"" + jQuery.trim(item) + "\");\r\n";
    }
   }
 }
 
 rollingDiv.bind("mouseover", function() { //마우스 올라가면 멈춤
   $("#rolling").stopRolling();
 });

 rollingDiv.bind("mouseout", function() { //마우스 없어지면 다시 롤링
   $("#rolling").resumeRolling();
 });

 rollingDiv.startRolling(50, 0, 150); // 페이지 롤링 맨 마지막 150은 속도, 높을수록 느려짐
});

 

<div id="rolling">
 </div>

 

저위에 jquery중에
 rollingDiv.addRollingItem(jQuery.trim(item));
 content += "rollingDiv.addRollingItem(\"" + jQuery.trim(item) + "\");\r\n";

위 코드를 부분 을 밑에처럼 변경하시면 됩니다. 그럼 밑에 form같은거 필요없음
rollingDiv.addRollingItem('<a href='naver.com'><img src='이미지 경로'></a>');

코드 보다보면 이상함이 느껴질것이다.

textarea 나오고 막 form 나오고 어쩌구 하는데 그냥 무시...;;

저건..음 막 이미지만 롤링되는게 아니라 html내용 자체가 롤링되어야 해서..

form만들고 그안에 textarea 안에 코드 넣어서 어쩌구 한건데 쓰레기임..;;

굳이 본다면..밑에 마냥..;;

<FORM id=rollingId name=rollingForm>
<TEXTAREA style="DISPLAY: none" wrap=off rows=0 cols=0 name=item0><table width='250'>
 <tr valign='top'>
     <td rowspan='2' width='62'>
         <img src='이미지주소' width='60' height='65' onClick='view();' style='cursor:hand;'>
     </td>
     <td class='b' style='padding-left:8px;'>
         <a href='#' class='ti'>타이틀  </a>
     </td>
 </tr>
<tr valign='top'>
     <td class='text' style='padding-left:8px;'><a href='#' class='te' return false;'>내용</a></td>
 </tr>
</table> 
</TEXTAREA>
</FORM>
rolling
Comment Write
Comment List
등록된 코멘트가 없습니다.