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);
});
이 글을 보고 간단히 만들어봤습니다.
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);
});
댓글 8개
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'
});
});
[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'
});
});
게시글 목록
| 번호 | 제목 |
|---|---|
| 26049 | |
| 2886 | |
| 14815 |
jQuery
[jQuery] 탭 메뉴
8
|
| 14808 |
jQuery
[jQuery] 상위부터 차례로 지역 선택하기
6
|
| 29814 |
HTML
Loading Panel Widget
|
| 14807 | |
| 2883 | |
| 2879 | |
| 2867 | |
| 2863 | |
| 14798 | |
| 14797 |
JavaScript
메모리 자동 반환 프로그램
|
| 2858 | |
| 14790 | |
| 2852 | |
| 14788 |
MySQL
원격지에 올리기..
1
|
| 14787 |
JavaScript
호스팅업을 하려고 하는데
|
| 2843 | |
| 2838 | |
| 14785 |
JavaScript
주문서에서..
1
|
| 14781 |
MySQL
쿼리문 실행시.
3
|
| 2834 | |
| 14780 | |
| 2830 | |
| 14779 |
기타
특정 url 접근제한
|
| 24227 | |
| 14778 | |
| 29812 |
HTML
도와 주세요
1
|
| 2818 | |
| 14773 | |
| 2815 | |
| 14772 | |
| 29811 | |
| 24214 | |
| 14767 |
PHP
나초보입니다
4
|
| 14762 |
jQuery
죄송하지만JQuery가 몬가요
4
|
| 14760 | |
| 14758 | |
| 24212 | |
| 26043 |
기획서
개발일정 간트차트
5
|
| 14757 |
JavaScript
[유용한팁]Kisa OpenAPI Whois 정보 (XML) 데이터 파싱하기
|
| 2807 | |
| 2791 | |
| 2783 | |
| 14755 |
JavaScript
스크립트좀짜주세용 ^___^
1
|
| 14753 |
MySQL
Mysql Error Num : 1045
1
|
| 2774 | |
| 2767 | |
| 14749 |
jQuery
selector 연습장
3
|
| 2756 | |
| 2751 | |
| 2750 | |
| 14748 |
정규표현식
정규표현식 샘플등 연습장(Air 웹기반)
|
| 14747 | |
| 29809 | |
| 29808 | |
| 29807 | |
| 14746 |
JavaScript
[유용한팁][콤보박스]자바스크립트로 콤보박스에 항목 동적으로 추가하기
|
| 29806 | |
| 29804 | |
| 29802 |
HTML
툴바 프로그램개발할때....
1
|
| 2740 | |
| 2732 | |
| 14745 | |
| 26037 | |
| 26031 |
계약서
사이트 계약서-별첨
5
|
| 2726 | |
| 29797 |
HTML
코드 잘 모르는 이가 질문
4
|
| 2724 | |
| 2712 | |
| 2692 | |
| 14742 |
JavaScript
문자열 자르기 질문드립니다.
2
|
| 14741 |
MySQL
MySQL PHP API Functions
|
| 14740 | |
| 14739 |
기타
Apache C API
|
| 14737 |
jQuery
jQuery 1.6.4 lib
1
|
| 29795 | |
| 2687 | |
| 14732 | |
| 26025 | |
| 14730 |
Flash
자바 관련 사이트 모음 입니다.
1
|
| 26020 | |
| 26017 | |
| 14729 | |
| 14723 |
jQuery
[질문] ie7의 웹페이지 로딩(렌더링)문제.
5
|
| 14722 |
jQuery
문의하나드립니다ㅠㅠ
|
| 2680 | |
| 26009 |
계약서
사이트 제작 계약서
7
|
| 24211 | |
| 14721 | |
| 2677 | |
| 14720 | |
| 14715 | |
| 2660 | |
| 14711 | |
| 14704 | |
| 2657 | |
| 2653 | |
| 14703 |
MySQL
서버 APM정보
|
| 14701 |
JavaScript
가격뽑기 및 질문 ㅎㅎ
1
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기