jQuery 그래프 애니메이션
[제작 및 배포]
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에서 이동 됨]
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 1개