Jquery 텍스트 상하 롤링 - Jquery tegseuteu sangha lolling

Question

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

목차 Show

만들어 볼 기능 참고
코드 구조
스크립트 작성
결과화면

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

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

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

우선 첨부파일 부터

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은 속도, 높을수록 느려짐
});

저위에 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>

이전 글에서 jQuery hide()와 show() 메서드 그리고 setInterval() 메서드 기본 코드를 공부해보았습니다.

[IT·인터넷] - jQuery - 사라짐 hide() 나타남 show() Effects

[IT·인터넷] - JavaScript - setInterval() Method 주기적 실행

이번에는 한 단계 업그레이드!

공부했던 코드를 기반으로 98도씨라는 쇼핑몰의 검색창 Hot Keyword 부분의 세로 롤링 배너를 참고하여 기능 구현해보았습니다. 핫 키워드의 텍스트가 세로로 롤링되어 올라오는 스타일입니다.

만들어 볼 기능 참고

코드 구조

HTML과 CSS는 아래와 같이 작성하였습니다.

<style>
    .box { width:350px; background:rgba(255,255,255,0.92); }    
    .boxIn { padding:20px; }
    .boxIn h3 { border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px; }
    .boxIn ul { height:150px; }
    .boxIn ul li {  }
    .boxIn ul li a { display:block; font-size:13px; line-height:2em; }
    .boxIn ul li:first-child a { font-size:18px; line-height:1.4em; font-weight:bold; }
    .boxIn ul li:nth-child(2) a { font-size:16px; line-height:1.4em; margin-top:4px; }

</style>

<div class="box">
    <div class="boxIn">
        <h3>Hot Keyword</h3>
        <ul>
            <li><a href="/">1. 리스트</a></li>
            <li><a href="/">2. 리스트</a></li>
            <li><a href="/">3. 리스트</a></li>
            <li><a href="/">4. 리스트</a></li>
            <li><a href="/">5. 리스트</a></li>
            <li><a href="/">6. 리스트</a></li>
        </ul>
    </div>
</div>

스크립트 작성

스크립트는 아래와 같이 작성하였습니다.

다음에는 appendTo에 대한 정리를 해봐야겠습니다 :)

setInterval(function() { /* setInterval 시작 */

    var boxIn = $('.boxIn ul'); /* boxIn 변수에 .boxIn ul 요소 저장 */
    
    var boxRow = $('.boxIn ul li:first'); /* boxRow 변수에 첫번째 .boxIn ul li 요소 저장  */
    
    var ARea = function(){ /* ARea 변수에 함수 저장 */
        boxRow.appendTo(boxIn).show(300); /* boxRow 요소를 boxIn 요소 마지막에 추가하며 show 메서드 적용합니다. */
    };
    
    $(boxRow).hide(300, ARea); /* boxRow 요소가 300ms로 숨겨지고나면 변수 ARea에 저장 된 콜백 함수가 실행됩니다. */        

},3000); /* setInterval 이 3초마다 실행됩니다. */