[jQuery] 실시간 검색어 순위 순서대로 보여주기
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개
14년 전
올리고 보니 쓸데없는 재귀가 쓰였군요. 바보 같은 코드인데...
window.setInterval로 처리하시는 게 훨씬 안전할 것 같습니다.
window.setInterval로 처리하시는 게 훨씬 안전할 것 같습니다.
14년 전
생각해 보면 animate가 interval을 쓰기 때문에 그냥 저 코드 그대로 가도 되는군요.
혼자 뭐하는 거지 (...)
혼자 뭐하는 거지 (...)
14년 전
혹 네이버,다음,네이트 실시간 검색어 XML 필요하시면
http://bangabmoa.com/api/hitkeyword.php?type=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'
});
});
[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를 골라 잡아서 돌려주시면 들여쓰기가 깔끔히 적용된 코드를 보실 수 있을 겁니다.
http://www.google.co.kr/search?q=JavaScript+Beautifier
맘에 드시는 JavaScript Beautifier를 골라 잡아서 돌려주시면 들여쓰기가 깔끔히 적용된 코드를 보실 수 있을 겁니다.
행복한남자
14년 전
http://jsbeautifier.org/
좋네요~ㅋ 감사합니다.
좋네요~ㅋ 감사합니다.
14년 전
이거 여러 부분에서 유용하겠네요
나스디자인
14년 전
오호~감사합니다
게시글 목록
| 번호 | 제목 |
|---|---|
| 15500 |
JavaScript
Cshop님 여기를 봐주세요.
5
|
| 26129 | |
| 29907 |
HTML
날나리 강좌. ㅋ HTML DTD
1
|
| 29906 | |
| 15497 |
Flash
플래쉬 초짜의 질문입니다 ㅠㅠ
2
|
| 15495 |
JavaScript
자바스크립트 자료형을 생각하면 지끈지끈
1
|
| 15486 | |
| 29905 | |
| 29902 |
HTML
[css] 마진 병합
2
|
| 29901 | |
| 29900 | |
| 29899 |
HTML
공백 문자의 병합
|
| 29898 |
HTML
제대로 단위 사용하자
|
| 15483 |
JavaScript
자바스크립트에 대한 오해 - 객체
2
|
| 3556 | |
| 15478 | |
| 15471 |
node.js
nodejs용 iconv (STDIO)
6
|
| 15465 |
JavaScript
중앙정렬만 하면 툴팁 좌표가 어긋납니다.
5
|
| 29892 | |
| 15462 |
PHP
insert
2
|
| 15459 |
MySQL
putty 질문 좀 드리겠습니다
2
|
| 15458 |
Linux
lsync 사용하기
|
| 3554 | |
| 3546 | |
| 15452 |
PHP
php 다른질문~
5
|
| 15448 |
PHP
php간단한 질문좀요
3
|
| 15441 | |
| 15426 |
PHP
insert 질문.
14
|
| 15424 |
Linux
루트비번 재설정
1
|
| 3544 | |
| 3538 | |
| 15423 |
MySQL
다른 테이블로 데이터 복사
|
| 15422 |
MySQL
grant 새 사용자 권한주기
|
| 15419 |
jQuery
체크박스 체크여부에 따라 나타나고 사라지게
2
|
| 15418 |
JavaScript
그누보드 에디터에서 폰트 크기를 포인트로 사용할 수 있나요?
|
| 26116 |
제안서
제안서 입니다.
12
|
| 15417 |
Linux
쉘스크립트 백업 설정
|
| 15415 |
Mobile
옵티머스 LTE 위치파악 오류
1
|
| 15405 |
JavaScript
닫기버튼 흐극 이거 우째할까요
9
|
| 15403 | |
| 15400 | |
| 15398 |
PHP
도움을 부탁드립니다..ㅠㅠ
1
|
| 3530 | |
| 15395 |
PHP
질문좀 드릴께요ㅠㅠ
2
|
| 15394 |
Flash
플래시8 버전 눈내리는 효과 입니다
|
| 15391 |
jQuery
jQure-menu 메뉴 서브포함
2
|
| 3526 | |
| 15368 | |
| 15366 |
JavaScript
광고고정하는법좀 알려주십사 글남겨요
1
|
| 15355 |
jQuery
제이쿼리 질문 어디다하면 좋을까요..
10
|
| 29886 | |
| 15354 |
Linux
리눅스 설치후 selinux 설정하기
|
| 15349 | |
| 29884 |
HTML
이미지를 돌려요 ~
1
|
| 15345 |
node.js
질문~
3
|
| 26103 | |
| 15342 | |
| 15339 |
PHP
PHP 보안문서
2
|
| 15335 | |
| 3521 | |
| 15330 |
node.js
nodejs에서 mysql 사용
4
|
| 26102 | |
| 29883 |
HTML
css3 메뉴
|
| 15327 | |
| 15326 | |
| 15310 |
Mobile
모바일 홈페이지를 가장 빨리만들수 있는 소스~
15
|
| 15300 |
jQuery
easing을 쉽게 보여주는 이미지입니다
9
|
| 15299 |
MySQL
카테고리에 적합한 쿼리 형식
|
| 15298 |
MySQL
mysql 리플리케이션 쿼리스킵
|
| 3518 | |
| 15292 |
node.js
node.js가 갑자기 땡기네요..^^
5
|
| 15290 |
node.js
node v0.2.6 한글 번역
1
|
| 15289 |
node.js
URL파싱
|
| 15286 |
node.js
node.js에서 html불러오기
2
|
| 29882 | |
| 29880 |
HTML
가변 위치에 배너 붙이기
1
|
| 3513 | |
| 24328 | |
| 15281 |
JavaScript
이거으용좀하고싶은데;;;히히
4
|
| 15280 |
Linux
apache에서 유저권한으로 파일 변경하기
|
| 15277 | |
| 29876 | |
| 26096 |
통계자료
웹사이트 성능분석 보고서
5
|
| 3504 | |
| 3496 | |
| 3487 | |
| 3481 | |
| 15275 |
jQuery
jquery 질문입니다 ㅠㅠ
1
|
| 15274 |
Linux
리눅스하드 스탠바이 모드설정
|
| 3475 | |
| 29872 | |
| 29870 |
HTML
[vim] 주석 달기~
1
|
| 3468 | |
| 3466 | |
| 3463 | |
| 3455 | |
| 3452 | |
| 15268 |
node.js
노드 항상 실행 어떻게 하시나요?
5
|
| 15267 |
Mobile
보리안드로이드
|
| 15266 |
Mobile
앱스프레소
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기