素材网 素材网

jquery柱状垂直数据统计图表

下载资源()次

阅读次数()次

发布时间:2016-05-11

jquery柱状垂直数据统计图表
分享到:

用法简介:

来源:xw素材网

jquery柱状垂直数据统计图表。
文件引用:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	//$(".VoteValue").css("margin-top",$(this).hei
	Vote.Init();
});
var Vote={
	voteJson:[
	{Name:"LeeSin",Img:"images/LeeSin.png",Value:220},
	{Name:"Ahri",Img:"images/Ahri.png",Value:161},
	{Name:"Sona",Img:"images/Sona.png",Value:130},
	{Name:"JarvanIV",Img:"images/JarvanIV.png",Value:211}
	],
	Init:function(){
		for(var i=0;i<Vote.voteJson.length;i++){
			var mName=Vote.voteJson[i].Name;
			var mImg=Vote.voteJson[i].Img;
			var mValue=Vote.voteJson[i].Value;
			var VoteItem=$("<div></div>");
			VoteItem.attr("class","VoteItem");
			$("#VoteMain").append(VoteItem);
			var VoteImg=$("<img title=\"支持一下\" src=\""+mImg+"\" />");
			VoteImg.attr("class","VoteImg");
			VoteImg.click(function(){
				$(this).next().css("height",$(this).next().height()+1+"px");
				$(this).next().css("margin-top",300-20-$(this).next().height()+"px");
				$(this).next().find(".VoteSpan").html($(this).next().height());
				var VoteSpanTri=$("<span></span>");
			    VoteSpanTri.attr("class","VoteSpanTri");
			    $(this).next().find(".VoteSpan").append(VoteSpanTri);
			});
			VoteItem.append(VoteImg);
			var VoteValue=$("<div></div>");
			VoteValue.attr("class","VoteValue");
			VoteValue.css("margin-top",300-20-mValue+"px");
			VoteValue.animate({height:mValue+"px"},500);
			VoteItem.append(VoteValue);
			var VoteSpan=$("<div>"+mValue+"</div>");
			VoteSpan.attr("class","VoteSpan");
			VoteValue.append(VoteSpan);
			var VoteSpanTri=$("<span></span>");
			VoteSpanTri.attr("class","VoteSpanTri");
			VoteSpan.append(VoteSpanTri);
			var VoteText=$("<p></p>");
			VoteText.html(mName);
			VoteText.attr("class","VoteText");
			VoteItem.append(VoteText);
		}
	}
}
</script>


   

相关标签:

上一篇:jQuery+html5实现柱形统计图与曲线统计图插件 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。