jquery_jquery를 기반으로 동적 수직 컬럼바 효과 구현-JS 튜토리얼-php.cn

jquery_jquery를 기반으로 동적 수직 컬럼바 효과 구현

WBOY

풀어 주다： 2016-05-16 15:15:45

원래의

1052명이 탐색했습니다.

이 글의 예시에서는 데이터 통계에 자주 사용되는 jquery에서 구현한 컬럼바(columnar bar)를 소개하고, 코드를 공유하고 구현 과정을 자세히 소개하겠습니다.

코드는 다음과 같습니다.

<html> 
<head> 
<meta charset="gb2312"> 
<title>jquery柱状条</title> 
<style type="text/css">
.container{
 width:20px;
 height:50px;
 border:1px solid #999;
 font-size:10px;
 float:left;
 margin-left:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
 var i=1;
 $('#top').height(8);
 $('#buttom').css('marginTop',42);
 $('#buttom').css('background','#d6d6d6');
  interid=setInterval(Showgao,0);
 function Showgao(){
  var oldH=$('#buttom').css('marginTop');
  var h= oldH.substr(0,oldH.indexOf('px'));
  $('#buttom').css('marginTop',h-1);
  $('#buttom').height(i);
  i++;
  if(i==43){clearInterval(interid);}
 }
 
 var i1=1;
 $('#top1').height(4);
 $('#buttom1').css('marginTop',46);
 $('#buttom1').css('background','red');
 interid1=setInterval(Showgao1,1);
 function Showgao1(){
  var oldH=$('#buttom1').css('marginTop');
  var h= oldH.substr(0,oldH.indexOf('px'));
  $('#buttom1').css('marginTop',h-1);
  $('#buttom1').height(i1);
  i1++;
  if(i1==30){clearInterval(interid1);}
 }
});
</script>
</head>
<body>
<div class="container">
 <div id="top">82%</div>
 <div id="buttom"></div>
</div>
<div class="container">
 <div id="top1" >62%</div>
 <div id="buttom1"></div>
</div>
</body>
</html>

로그인 후 복사

위 코드는 컬럼형 막대 데이터의 동적 효과를 구현합니다. 다음은 구현 과정을 소개합니다.
1.$(function(){}), 문서 구조가 완전히 로드되면 재해 지역의 코드가 실행됩니다.
2.var i=1, 변수를 선언하고 초기값을 1로 할당합니다. 나중에 사용할 것이므로 여기서는 당분간 소개하지 않습니다.

3.$('#top').height(8), 상단 요소의 높이를 8px로 설정합니다.
4.$('#buttom').css('marginTop',42), Buttom 요소의 상단 여백을 42px42+8=50으로 설정합니다. 이는 정확히 컨테이너 요소의 높이입니다. 상단 요소가 컨테이너 상단에 정확하게 위치할 수 있도록 합니다.
5.$('#buttom').css('ground','#d6d6d6'),하단 요소의 배경색을 설정합니다.
6.interid=setInterval(Showgao,0), 타이머 기능을 이용하면 Showgao 함수를 계속해서 호출할 수 있습니다.
7.function Showgao(){}, 이 함수가 한 번 실행되지 않으면 그에 따라 아래쪽 요소의 위쪽 여백과 높이가 설정되어 위쪽 요소가 항상 같은 효과를 얻습니다. 상단 및 기둥형 막대가 동적으로 증가합니다.
8.var oldH=$('#buttom').css('marginTop'), Buttom 요소의 위쪽 여백 크기를 가져옵니다. 9.var h= oldH.substr(0,oldH.indexOf('px')), 크기 값의 숫자 부분을 가져옵니다(예: "28px"의 28).
10.$('#buttom').css('marginTop',h-1), 상단 여백 크기를 1만큼 줄입니다.
11.$('#buttom').height(i), Buttom 요소의 높이를 설정합니다.
12.i++, i 값이 1 증가합니다.
13.if(i==43){clearInterval(interid);}, i 값이 43이면 buttom의 높이 값이 42px이라는 뜻입니다. 상단 높이를 50px로 설정한 후 타이머 기능 실행을 중지합니다.

위 내용은 이 글의 자세한 내용입니다. Jquery 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.