js实现正方形颜色从下往上升的效果
内容摘要
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/
<html xmlns="http://www.w3.org/1999/
文章正文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>无标题文档</title> </head> <script src= "jquery-1.8.2.js" type= "text/javascript" ></script> <script type= "text/javascript" > $( function (){ interid=setInterval(Showgao,1); var i=1; $( '#top' ).height(8); $( '#buttom' ).css( 'marginTop' ,42); $( '#buttom' ).css( 'background' , '#d6d6d6' ); 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==42){clearInterval(interid);} } interid1=setInterval(Showgao1,1); var i1=1; $( '#top1' ).height(4); $( '#buttom1' ).css( 'marginTop' ,46); $( '#buttom1' ).css( 'background' , 'red' ); 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> <body> <style> .container{width:20px;height:50px;border:1px solid #999;font-size:10px;float:left;margin-left:5px;} </style> <div class = "container" onclick= "javascript:alert(1);" > <div id= "top" >82%</div> <div id= "buttom" ></div> </div> <div class = "container" onclick= "javascript:alert(1);" > <div id= "top1" >62%</div> <div id= "buttom1" ></div> </div> </body> </html> |
代码注释