[제작 및 배포]
http://www.rinix.co.kr
주인장 RINIX
[패치내용]
1. Mozilla, Safari, Opera 에서도 사용가능.
2. 그래프 롤오버시 애니메이션 추가.
3. 설명창 위치 교정.
[사용용도]
rx_graph 는 jQuery UI 이로서 세로형 또는 가로형 그레프 제작에 사용합니다.
간단하게 테이블과 레이어만의 설정으로 쉽게 그레프를 그릴수 있으며 초기 한번에 한해서 에니메이션을 실행합니다.
[사용방법]
1. script 설정
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="rx_graph.js"></script>
2. CSS 설정
<style>
.rx_bar {
width:14px;
height:1px;
clear: left;
float: left;
margin-top: 2px;
margin-right: 5px;
margin-left: 5px;
background-image: url(bar.gif);
}
#rx_win {
font-family: "굴림", "돋움";
font-size: 11px;
line-height: 18px;
color: #666666;
background-color: #FAFAFA;
padding: 5px;
border: 1px solid #666666;
position: absolute;
}
</style>
.rx_bar 는 그레프 스타일시트입니다. 혹 명칭이 맘에 안들어 바꾸시지 마세요 rx_graph 는 스타일시트이름으로 그래프레이어를 구분합니다.
#rx_win 는 그래프 롤오버시 나타나는 창의 스타일시트입니다.
3. 그래프설정
<div class="rx_bar" alt="높이" caption="설명창내용"></div>
alt 는 그래프의 높이이며 caption은 그래프 롤오버시 설명내용입니다.
http://www.rinix.co.kr
주인장 RINIX
[패치내용]
1. Mozilla, Safari, Opera 에서도 사용가능.
2. 그래프 롤오버시 애니메이션 추가.
3. 설명창 위치 교정.
[사용용도]
rx_graph 는 jQuery UI 이로서 세로형 또는 가로형 그레프 제작에 사용합니다.
간단하게 테이블과 레이어만의 설정으로 쉽게 그레프를 그릴수 있으며 초기 한번에 한해서 에니메이션을 실행합니다.
[사용방법]
1. script 설정
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="rx_graph.js"></script>
2. CSS 설정
<style>
.rx_bar {
width:14px;
height:1px;
clear: left;
float: left;
margin-top: 2px;
margin-right: 5px;
margin-left: 5px;
background-image: url(bar.gif);
}
#rx_win {
font-family: "굴림", "돋움";
font-size: 11px;
line-height: 18px;
color: #666666;
background-color: #FAFAFA;
padding: 5px;
border: 1px solid #666666;
position: absolute;
}
</style>
.rx_bar 는 그레프 스타일시트입니다. 혹 명칭이 맘에 안들어 바꾸시지 마세요 rx_graph 는 스타일시트이름으로 그래프레이어를 구분합니다.
#rx_win 는 그래프 롤오버시 나타나는 창의 스타일시트입니다.
3. 그래프설정
<div class="rx_bar" alt="높이" caption="설명창내용"></div>
alt 는 그래프의 높이이며 caption은 그래프 롤오버시 설명내용입니다.
rx_graph[1.01].js
$(document).ready(function(){
// 애니매이션 설정
/*$("div.rx_bar").animate({
height: $(this).attr("alt") + "px",
opacity: 1
}, 1500 );*/
for(i=0; i<$("div.rx_bar").length; i++){
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 2000 );
}
// 설명창
$("div.rx_bar").hover(function(e){
i = $("div.rx_bar").index(this);
rx_over(i);
$("body").append("<div id='rx_win'>"+ $(this).attr("caption") +"</div>");
rx_win_w = $("#rx_win").innerWidth(true) / 2;
rx_win_h = $("#rx_win").innerHeight(true) + 20;
$("#rx_win").css({"top":(e.pageY - rx_win_h) + "px", "left":(e.pageX - rx_win_w) + "px"}).show();
}, function(){
$("#rx_win").remove();
});
});
function rx_over(i){
pr = $("div.rx_bar").eq(i).attr("alt")*0.2;
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
opacity: 0.75
}, 250 )
.animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 500 );
}
// 애니매이션 설정
/*$("div.rx_bar").animate({
height: $(this).attr("alt") + "px",
opacity: 1
}, 1500 );*/
for(i=0; i<$("div.rx_bar").length; i++){
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 2000 );
}
// 설명창
$("div.rx_bar").hover(function(e){
i = $("div.rx_bar").index(this);
rx_over(i);
$("body").append("<div id='rx_win'>"+ $(this).attr("caption") +"</div>");
rx_win_w = $("#rx_win").innerWidth(true) / 2;
rx_win_h = $("#rx_win").innerHeight(true) + 20;
$("#rx_win").css({"top":(e.pageY - rx_win_h) + "px", "left":(e.pageX - rx_win_w) + "px"}).show();
}, function(){
$("#rx_win").remove();
});
});
function rx_over(i){
pr = $("div.rx_bar").eq(i).attr("alt")*0.2;
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
opacity: 0.75
}, 250 )
.animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 500 );
}
[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
댓글 1개
13년 전
감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2530 |
 l2zeo |
15년 전 | 2612 | |
| 2529 |
l2zeo |
15년 전 | 1326 | |
| 2528 | 15년 전 | 1030 | ||
| 2527 | 15년 전 | 1499 | ||
| 2526 | 15년 전 | 901 | ||
| 2525 | 15년 전 | 1198 | ||
| 2524 | 15년 전 | 1093 | ||
| 2523 | 15년 전 | 1492 | ||
| 2522 |
NY더지더지
|
15년 전 | 1632 | |
| 2521 | 15년 전 | 903 | ||
| 2520 |
l2zeo |
15년 전 | 1310 | |
| 2519 |
l2zeo |
15년 전 | 1102 | |
| 2518 | 15년 전 | 932 | ||
| 2517 |
l2zeo |
15년 전 | 1007 | |
| 2516 | 15년 전 | 1321 | ||
| 2515 | 15년 전 | 762 | ||
| 2514 | 15년 전 | 946 | ||
| 2513 | 15년 전 | 2599 | ||
| 2512 |
l2zeo |
15년 전 | 1417 | |
| 2511 |
 Acazen |
15년 전 | 785 | |
| 2510 |
l2zeo |
15년 전 | 815 | |
| 2509 | 15년 전 | 1260 | ||
| 2508 | 15년 전 | 1294 | ||
| 2507 | 15년 전 | 1550 | ||
| 2506 | 15년 전 | 1026 | ||
| 2505 | 15년 전 | 1395 | ||
| 2504 |
JMoon
|
15년 전 | 692 | |
| 2503 |
 JY소프트 |
15년 전 | 1041 | |
| 2502 | 15년 전 | 1304 | ||
| 2501 | 15년 전 | 2718 | ||
| 2500 | 15년 전 | 1081 | ||
| 2499 | 15년 전 | 1052 | ||
| 2498 | 15년 전 | 951 | ||
| 2497 |
첫만남의감격
|
15년 전 | 827 | |
| 2496 |
Acazen |
15년 전 | 838 | |
| 2495 |
 프리웹코리아 |
15년 전 | 3430 | |
| 2494 |
soulfuleyes
|
15년 전 | 2804 | |
| 2493 | 15년 전 | 1986 | ||
| 2492 | 15년 전 | 2433 | ||
| 2491 | 15년 전 | 1523 | ||
| 2490 | 15년 전 | 1067 | ||
| 2489 | 15년 전 | 1062 | ||
| 2488 | 15년 전 | 2338 | ||
| 2487 | 15년 전 | 882 | ||
| 2486 | 15년 전 | 1926 | ||
| 2485 |
못말리는크리스
|
15년 전 | 728 | |
| 2484 |
 vitamin |
15년 전 | 1879 | |
| 2483 | 15년 전 | 811 | ||
| 2482 | 15년 전 | 2486 | ||
| 2481 | 15년 전 | 731 | ||
| 2480 | 15년 전 | 1163 | ||
| 2479 | 15년 전 | 713 | ||
| 2478 |
l2zeo |
15년 전 | 2881 | |
| 2477 | 15년 전 | 1258 | ||
| 2476 | 15년 전 | 1290 | ||
| 2475 | 15년 전 | 1299 | ||
| 2474 | 15년 전 | 1364 | ||
| 2473 | 15년 전 | 977 | ||
| 2472 | 15년 전 | 1735 | ||
| 2471 | 15년 전 | 1263 | ||
| 2470 | 15년 전 | 846 | ||
| 2469 | 15년 전 | 2701 | ||
| 2468 | 15년 전 | 1091 | ||
| 2467 | 15년 전 | 1289 | ||
| 2466 | 15년 전 | 1088 | ||
| 2465 | 15년 전 | 1939 | ||
| 2464 | 15년 전 | 1953 | ||
| 2463 | 15년 전 | 1615 | ||
| 2462 | 15년 전 | 971 | ||
| 2461 | 15년 전 | 1207 | ||
| 2460 | 15년 전 | 901 | ||
| 2459 | 15년 전 | 839 | ||
| 2458 | 15년 전 | 1082 | ||
| 2457 | 15년 전 | 2444 | ||
| 2456 | 15년 전 | 2467 | ||
| 2455 | 15년 전 | 1448 | ||
| 2454 | 15년 전 | 994 | ||
| 2453 | 15년 전 | 1146 | ||
| 2452 | 15년 전 | 1157 | ||
| 2451 | 15년 전 | 1021 | ||
| 2450 | 15년 전 | 923 | ||
| 2449 | 15년 전 | 851 | ||
| 2448 | 15년 전 | 1212 | ||
| 2447 | 15년 전 | 1164 | ||
| 2446 | 15년 전 | 910 | ||
| 2445 | 15년 전 | 878 | ||
| 2444 | 15년 전 | 1052 | ||
| 2443 | 15년 전 | 1530 | ||
| 2442 | 15년 전 | 1055 | ||
| 2441 | 15년 전 | 1386 | ||
| 2440 |
l2zeo |
15년 전 | 1222 | |
| 2439 | 15년 전 | 1893 | ||
| 2438 |
 JMS007 |
15년 전 | 2952 | |
| 2437 |
JMS007 |
15년 전 | 2285 | |
| 2436 |
JMS007 |
15년 전 | 884 | |
| 2435 |
JMS007 |
15년 전 | 1894 | |
| 2434 |
JMS007 |
15년 전 | 2084 | |
| 2433 |
 WEBPD |
15년 전 | 1381 | |
| 2432 | 15년 전 | 1362 | ||
| 2431 | 15년 전 | 2626 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기