[jQuery] 실시간 검색어 순위 순서대로 보여주기

아샬

· 14년 전 · 조회 7330 7330 · 댓글 8 8

http://sir.co.kr/bbs/board.php?bo_table=tiptech&wr_id=3569

이 글을 보고 간단히 만들어봤습니다.

index.html

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Real-time Rank</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="application.js" type="text/javascript"></script>
        </head>
    <body>
        <div id="content">
            <dl id="rank-list">
                <dt>실시간 급상승 검색어</dt>
                <dd>
                    <ol>
                        <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>
                        <li><a href="#">7 순위</a></li>
                        <li><a href="#">8 순위</a></li>
                        <li><a href="#">9 순위</a></li>
                        <li><a href="#">10 순위</a></li>
                    </ol>
                </dd>
            </dl>
        </div>
    </body>
</html>

stylesheet.css

body {
    font-size: 12px;
    background: #FFF;
    color: #333;
    margin: 0;
}

#content {
    margin: 20px;
    padding: 10px;
    background: #393;
}

#rank-list a {
    color: #FFF;
    text-decoration: none;
}

#rank-list a:hover {
    text-decoration: underline;
}

#rank-list {
    overflow: hidden;
    width: 160px;
    height: 20px;
    margin: 0;
}

#rank-list dt {
    display: none;
}

#rank-list dd {
    position: relative;
    margin: 0;
}

#rank-list ol {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#rank-list li {
    height: 20px;
    line-height: 20px;
}

application.js

$(function() {
    var count = $('#rank-list li').length;
    var height = $('#rank-list li').height();

    function step(index) {
        $('#rank-list ol').delay(2000).animate({
            top: -height * index,
        }, 500, function() {
            step((index + 1) % count);
        });
    }

    step(1);
});

#개발자팁 #개발자 #팁자료실 #jquery

글쓰기

댓글 8개

아샬

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

올리고 보니 쓸데없는 재귀가 쓰였군요. 바보 같은 코드인데...

window.setInterval로 처리하시는 게 훨씬 안전할 것 같습니다.

아샬

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

생각해 보면 animate가 interval을 쓰기 때문에 그냥 저 코드 그대로 가도 되는군요.

혼자 뭐하는 거지 (...)

소셜포탈

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

혹 네이버,다음,네이트 실시간 검색어 XML 필요하시면
http://bangabmoa.com/api/hitkeyword.php?type=xml
활용하세요.

아샬

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

upcount 말고 downcount가 있는지는 모르겠지만, 일단 upcount가 항상 있다는 가정 하에 적용해봤습니다.

[application.js]

$(function() {
function animateRankList() {
var count = $('#rank-list li').length;
var height = $('#rank-list li').height();

function step(index) {
$('#rank-list ol').delay(2000).animate({
top: -height * index,
}, 500, function() {
step((index + 1) % count);
});
}

step(1);
}

window.yqlCallback = function(data) {
$(data.query.results.channel.data.naver.item).each(function(index, item) {
var text = item.rank + ' - ' + item.keyword + ' [' + item.upcount + ']';
$('#rank-list li a').eq(index).text(text);
});

animateRankList();
}

$('#rank-list li a').text('');

var url = 'http://bangabmoa.com/api/hitkeyword.php?type=xml';
var yql = 'SELECT * FROM xml WHERE url="' + url + '"';

$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql?q=' + yql +
'&format=json&callback=yqlCallback',
dataType: 'script'
});
});

아샬

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

댓글에선 들여쓰기가 하나도 적용 안 되네요.

http://www.google.co.kr/search?q=JavaScript+Beautifier

맘에 드시는 JavaScript Beautifier를 골라 잡아서 돌려주시면 들여쓰기가 깔끔히 적용된 코드를 보실 수 있을 겁니다.

행복한남자

프로필 보기 이 회원 글보기 이 회원의 댓글보기

14년 전

http://jsbeautifier.org/

좋네요~ㅋ 감사합니다.