[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년 전
오호~감사합니다
게시글 목록
| 번호 | 제목 |
|---|---|
| 2372 | |
| 25946 | |
| 14575 |
jQuery
jquery 질문하나만 부탁드립니다.
5
|
| 2367 | |
| 29773 | |
| 2358 | |
| 2354 | |
| 2350 | |
| 29770 | |
| 29766 |
HTML
자바스크립트 정규식 질문 드립니다
3
|
| 24173 | |
| 2345 | |
| 25942 | |
| 25939 | |
| 29764 | |
| 14571 |
jQuery
jQuery 샘플자료들이 많군요
3
|
| 14567 | |
| 14561 |
JavaScript
css관련 질문입니다!
5
|
| 24172 | |
| 29763 | |
| 14556 |
JavaScript
관계연산자?
4
|
| 14550 |
JavaScript
select 를 스크립트 질문이요.
5
|
| 14549 | |
| 2332 | |
| 14544 | |
| 14535 |
JavaScript
php함수에 setTimeout 비스꾸무리한게 있나요?
8
|
| 14534 | |
| 14529 | |
| 2318 | |
| 2313 | |
| 2311 | |
| 14526 |
JavaScript
제로보드&그누보드 구별법
2
|
| 14522 | |
| 29761 | |
| 25938 | |
| 29759 |
HTML
소스가 안되서 질문을 좀 드려요
1
|
| 2297 | |
| 2281 | |
| 25936 | |
| 14521 | |
| 14514 |
MySQL
트렌젝션 문의
6
|
| 24167 | |
| 25935 | |
| 2266 | |
| 14513 |
JavaScript
특정사용자 소유의 모든파일 찾기
|
| 14512 | |
| 2257 | |
| 2230 | |
| 14511 | |
| 25926 |
계약서
유지보수 계약서
8
|
| 14503 | |
| 2224 | |
| 25922 | |
| 25920 | |
| 2211 | |
| 14500 | |
| 2209 | |
| 14499 | |
| 24158 | |
| 2204 | |
| 14491 | |
| 2197 | |
| 14490 |
jQuery
Jquery + me2day 검색
|
| 14489 |
jQuery
Jquery + me2day 검색
|
| 2189 | |
| 24155 | |
| 14487 |
MySQL
mysql 데이터 파일 체크하기
1
|
| 14486 | |
| 25916 | |
| 2185 | |
| 29757 |
HTML
제이쿼리 부문 질문입니다.
1
|
| 24154 | |
| 25913 | |
| 29755 | |
| 14484 | |
| 2181 | |
| 2164 | |
| 25907 | |
| 2163 | |
| 2153 | |
| 2149 | |
| 2145 | |
| 2130 | |
| 2116 | |
| 2107 | |
| 2103 | |
| 29753 | |
| 14483 |
JavaScript
view.skin.php 파일 하나 만들어 주시면 안될까요?
|
| 2099 | |
| 2039 | |
| 29750 | |
| 2021 | |
| 2015 | |
| 2006 | |
| 14482 | |
| 1989 | |
| 1972 | |
| 1969 | |
| 14481 | |
| 1963 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기