js 兼容ie6,7,8浏览器漂亮柱状统计图

时间：2009-08-12 编辑：简简单单来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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>
<title>兼容各种浏览器的漂亮柱状图</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body {
	padding:0;
	margin:40px;
	font-size:9pt;
	font-family:Helvetica,Geneva,sans-serif;
}
h3 {
	font-weight:normal;
	display:block;
	
	text-align:center;
}
/* ul */
ul#q-graph {
	border:2px solid #0063be;
	background:#ffc url(http://www.zzsky.cn/effect/images/200908092345/1.png) repeat-x scroll 0 0 !important;
	background:#ffc repeat-x scroll 0 0;
	!important;
	
	
	position:relative;
	list-style:none;
	margin:1.1em 1em 3.5em;
	padding:0;
}
#q-graph li {
	position:absolute;
	text-align:center;
	bottom:0;
	padding:0
	margin:0;
}
/* ul li */
li.qtr {
	
	
	border-right:1px dotted #41a3e2;
	z-index:2;
}
li#q1 {
	left:0;
}
li#q2 {
	left:150px;
}
li#q3 {
	left:300px;
}
li#q4 {
	left:450px;border-right:none;
}
/* ul li ul */
#q-graph ul {
	list-style:none;
}
/* ul li ul li */
li.bar {
	
	color:#fff;
}
li.north {
	left:36px;
	background:#ddd url('http://www.zzsky.cn/effect/images/200908092345/2.gif') no-repeat 0 0;
}
li.south {
	left:80px;
	background:#ddd url('http://www.zzsky.cn/effect/images/200908092345/2.gif') no-repeat -34px 0;
}
/* ul li divs */
li#ticks {
	left:0;
	
	width:100%;
	z-index:1;
}
div.ticks {
	position:relative;
	
	border-top:1px dotted #41a3e2;
}
/* only4 Firefx IE 7+ */
div.ticks:first-child {
	border-top:none;
}
div.ticks p {
	position:absolute;
	left:101%;
	top:-2px;
	color:#f00;
	font-weight:bold;
}
</style>
</head>
<body>

<ul id="q-graph">
  <li id="q1" class="qtr">Q1
    <ul>
      <li class="north bar">20</li>
      <li class="south bar">10</li>
    </ul>
  </li>
  <li id="q2" class="qtr">Q2
    <ul>
      <li class="north bar">30</li>
      <li class="south bar">11</li>
    </ul>
  </li>
 <li id="q3" class="qtr">Q3
    <ul>
      <li class="north bar">40</li>
      <li class="south bar">29</li>
    </ul>
  </li>
 <li id="q4" class="qtr">Q4
    <ul>
      <li class="north bar"></li>
      <li class="south bar">0</li>
    </ul>
  </li>
  <li id="ticks">
    <div class="ticks"><p>50</p></div>
    <div class="ticks"><p>40</p></div>
    <div class="ticks"><p>30</p></div>
    <div class="ticks"><p>20</p></div>
    <div class="ticks"><p>10</p></div>
  </li>
</ul>
<script language="javascript">
function qt(tid,qid){
	var Hs=document.getElementById(tid).offsetHeight-5
	var oObj=document.getElementById(qid).getElementsByTagName("li"),k=oObj.length;
	for (var oi=0;oi<k-1;oi++){
               if(oObj[oi].id!=''){
		var obj=oObj[oi].getElementsByTagName("li"),j=obj.length
		for (var i=0;i<j;i++){
			if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0)
			{obj[i].style.px"}
			else {obj[i].style.display="none"}
		}}
	}
}
onload=function(){qt("ticks","q-graph")}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

上一个： js控制图片转动效果代码
下一个：超酷仿FLASH导航菜单效果

推荐专题

最新下载

热门教程

js 兼容ie6,7,8浏览器漂亮柱状统计图

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程