Home > Developer > Web Develop
The vertical dynamic histogram effect for jquery:
A lot of data statistical effects, the histogram is a more common way, the image is intuitive, the following is a piece of code to achieve this function, and has a certain dynamic effect, the following on the code to share, and detailed introduction of its implementation process.
The code is as follows:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>Ant Tribe</title> <styletype= "Text/css">. Container{width:20px;Height:50px;Border:1px solid #999;font-size:10px;float: Left;Margin-left:5px;}</style><Scriptsrc= "Http://libs.baidu.com/jquery/1.9.0/jquery.js"></Script><Scripttype= "Text/javascript">$(function(){ varI=1; $('#top'). Height (8); $('#buttom'). CSS ('margintop', the); $('#buttom'). CSS ('background','#d6d6d6'); Interid=setinterval (Showgao,0); functionShowgao () {varOLDH=$('#buttom'). CSS ('margintop'); varh=Oldh.substr (0, Oldh.indexof ('px')); $('#buttom'). CSS ('margintop', H-1); $('#buttom'). Height (i); I++; if(i== +) {clearinterval (Interid);} } varI1=1; $('#top1'). Height (4); $('#buttom1'). CSS ('margintop', $); $('#buttom1'). CSS ('background','Red'); Interid1=setinterval (SHOWGAO1,1); functionShowgao1 () {varOLDH=$('#buttom1'). CSS ('margintop'); varh=Oldh.substr (0, Oldh.indexof ('px')); $('#buttom1'). CSS ('margintop', H-1); $('#buttom1'). Height (i1); I1++; if(I1== -) {clearinterval (INTERID1);} }});</Script></Head><Body><Divclass= "Container"> <DivID= "Top">82%</Div> <DivID= "Buttom"></Div></Div><Divclass= "Container"> <DivID= "Top1" >62%</Div> <DivID= "Buttom1"></Div></Div></Body></HTML>
The above code implements the dynamic effect of bar data, and the following describes its implementation process.
A. Related reading:
1.$ (function () {}), when the document structure is fully loaded complete the code in the execution function of the disaster area.
2.var I=1, declare a variable and assign an initial value of 1, will be used later, here for the time being not introduced. 3.$ (' #top '). Height (8), set the top element to 8px.
4.$ (' #buttom '). CSS (' margintop ', 42), set the top margin of the buttom element to 42px42+8=50 exactly the height of the container element, so that the top element can be exactly at the top of the container.
5.$ (' #buttom '). CSS (' background ', ' #d6d6d6 '), sets the background color of the bottom element.
6.interid=setinterval (showgao,0), the Showgao function is constantly called using the timer function.
7.function Showgao () {}, this function does not execute once, it is set to the bottom element's upper margin and height accordingly, so that the top element is always at the top and the bars dynamically increase the effect.
8.var oldh=$ (' #buttom '). CSS (' margintop '), gets the dimensions of the top margin of the buttom element. 9.var h= oldh.substr (0,oldh.indexof (' px ')) to obtain a numerical portion of the dimension value, such as 28 in "28px".
10.$ (' #buttom '). CSS (' margintop ', h-1), reducing the size of the top margin by one.
11.$ (' #buttom '). Height (i), sets the altitude of the buttom element.
The value of 12.i++,i plus 1.
13.if (i==43) {clearinterval (Interid);}, if the value of I equals 43, the buttom height value equals 42px, and the height of exactly and top is 50px, then the execution of the timer function is stopped.
Two. Related reading:
The 1.height () function can be found in thethe height () method of jqueryA chapter.
The 2.css () function can be found in thejquery's CSS () methodA chapter.
The 3.setInterval () function can be found in thesetinterval () function usage detailedA chapter.
The 4.substr () function can be found in thethe substr () method of a JavaScript string objectA chapter.
The 5.indexOf () function can be found in thea brief introduction to the indexof () function usage of JS arraysA chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=15065
For more information, refer to: http://www.softwhy.com/jquery/
The vertical dynamic histogram effect for jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
