经验分享程序开发文档资料数据资源其它资源

Bootstrap百分比混合柱形图表特效js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Bootstrap百分比混合柱形图表特效js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

Bootstrap百分比混合柱形图表特效js代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap百分比混合柱形图表代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/lianxi.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 100px;">
<div class="row">
	<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
		<div class="up_downs">
			<div class="left_up_downs pull-left">
				<p>100%</p>
				<p>80%</p>
				<p>60%</p>
				<p>40%</p>
				<p>20%</p>
				<p>0%</p>　
			</div>
			<div class="right_up_downs pull-left">
				<div class="right_up_downs_top">
					<!--背景线-->
					<ul class="list-unstyled right_top_ul">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<!--柱形-->
					<div class="right_pillar">
						<ul class="list-unstyled right_pillar_ul">
							<li>
								<div class="right_pillar_for">
									<div class="right_pillar_fill right_pillar_color1" id="pillar_content1"
										 data-toggle="tooltip" data-placement="auto"
										 title="<p class='text-left'>满分：100分</p><p  class='text-left'>52%(52分)</p>">
										<div class="right_pillar_bg_1" style="height: 50%"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="right_pillar_for">
									<div class="right_pillar_fill right_pillar_color3" id="pillar_content3"
										 data-toggle="tooltip" data-placement="auto"
										 title="<p class='text-left'>满分：100分</p><p  class='text-left'>52%(52分)</p>">
										<div class="right_pillar_bg_3" style="height: 50%"></div>
									</div>
									<div class="right_pillar_fill right_pillar_color4" id="pillar_content4"
										 data-toggle="tooltip" data-placement="auto"
										 title="<p class='text-left'>满分：120分</p><p  class='text-left'>46%(84分)</p>">
										<div class="right_pillar_bg_4" style="height: 45%"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="right_pillar_for">
									<div class="right_pillar_fill  right_pillar_color6" id="pillar_content6"
										 data-toggle="tooltip" data-placement="auto"
										 title="<p class='text-left'>满分：120分</p><p  class='text-left'>46%(84分)</p>">
										<div class="right_pillar_bg_6" style="height: 45%"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="right_pillar_for">
									<div class="right_pillar_fill right_pillar_color7" id="pillar_content7"
										 data-toggle="tooltip" data-placement="auto"
										 title="<p class='text-left'>满分：100分</p><p  class='text-left'>52%(52分)</p>">
										<div class="right_pillar_bg_7" style="height: 50%"></div>
									</div>
									<div class="right_pillar_fill right_pillar_color8" id="pillar_content8"
										 data-toggle="tooltip" data-placement="auto"
										 title="<p class='text-left'>满分：120分</p><p  class='text-left'>46%(84分)</p>">
										<div class="right_pillar_bg_8" style="height: 45%"></div>
									</div>
								</div>
							</li>
							<li>
								<div class="right_pillar_for">
									<div class="right_pillar_fill   right_pillar_color9" id="pillar_content9"
										 data-toggle="tooltip" data-placement="auto" title="E(需努力)">
										<div class="right_pillar_bg_9"
											 style="height: 50%;background:#F3BC8B !important;"></div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="right_up_downs_bottom clearfix">
					<div class="pull-left text-center">分数</div>
					<div class="pull-left text-center">小题正确率</div>
					<div class="pull-left text-center">知识点得分率</div>
					<div class="pull-left text-center">试卷含金量</div>
					<div class="pull-left text-center">等级评定</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<script>
$(function () {
	myTooltip('#pillar_content1');
	myTooltip('#pillar_content2');
	myTooltip('#pillar_content3');
	myTooltip('#pillar_content4');
	myTooltip('#pillar_content5');
	myTooltip('#pillar_content6');
	myTooltip('#pillar_content7');
	myTooltip('#pillar_content8');
	myTooltip('#pillar_content9');
	myTooltip('#pillar_content10');
});
function myTooltip(id) {
	$('[data-toggle="tooltip"]').tooltip({html: true});

	$(id).on('show.bs.tooltip', function () {
		var bg = $(id).find("div").css("background-color");
//              alert(bg);
		setTimeout(function () {  //alert(0);
			$(".tooltip.top .tooltip-arrow").css({'border-top-color': bg});
			$(".tooltip.bottom .tooltip-arrow").css({'border-bottom-color': bg});
			$(".tooltip.left .tooltip-arrow").css({'border-left-color': bg});
			$(".tooltip.right .tooltip-arrow").css({'border-right-color': bg});
			$(".tooltip-inner").css({
				'background': "#fff",
				'color':"#333",
				"border":"1px",
				"border-style":'solid',
				"border-color":bg,
				"padding":"10px",
				"box-sizing":"border-box",
				"font-size":"16px"
			});
		}, 10);
	})
}
$(function () {
	$(".right_pillar_for").each(function (index) {
		var len=$(".right_pillar_for").eq(index).children().length;
		console.log(len);
		if (len==1){
			$(".right_pillar_for").eq(index).find(".right_pillar_fill").addClass("right_pillar_dan");
		}else {
			$(".right_pillar_for").eq(index).find(".right_pillar_fill").removeClass("right_pillar_dan");
		}
	})
})
</script>
</body>
</html>

CSS代码(lianxi.css):

@charset "utf-8";.up_downs{width:100%;height:500px;}
.up_downs .left_up_downs{width:5%;height:100%;text-align:right;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-right:5px;}
.up_downs .left_up_downs p{margin:0;padding:0;height:16.6%;}
.right_up_downs{width:95%;height:100%;position:relative;}
.right_up_downs .right_up_downs_top{height:83%;width:100%;position:relative;}
.right_up_downs .right_up_downs_top .right_top_ul{position:absolute;z-index:-1;width:100%;height:100%;margin:0;padding:0;border-left:2px solid #6c6c6c;border-right:1px solid #d2d2d2;}
.right_up_downs .right_up_downs_top .right_pillar{width:100%;height:100%;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul{width:100%;height:100%;margin:0;padding:0;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul li{float:left;width:20%;height:100%;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul li .right_pillar_for{width:70%;height:100%;margin:0 auto;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul li .right_pillar_for .right_pillar_fill{width:25%;height:100%;background:transparent;float:left;margin:0 12.5%;position:relative;cursor:pointer;}
.right_pillar_dan{float:none !important;margin:0 auto !important;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul li .right_pillar_for .right_pillar_fill div{width:100%;position:absolute;bottom:0;}
.right_up_downs .right_up_downs_top .right_top_ul li{height:20%;width:100%;border-top:1px solid #d2d2d2;}
.right_up_downs .right_up_downs_top .right_top_ul li:last-child{border-bottom:none;}
.right_up_downs .right_up_downs_bottom{height:17%;width:100%;line-height:2;}
.right_up_downs .right_up_downs_bottom div{width:20%;height:100%;line-height:2;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;border-top:2px solid #6c6c6c;}
/*颜色 border*/
.right_pillar_color1{border:1px solid #7196D6;}
.right_pillar_color2{border:1px solid #4E7CCC;}
.right_pillar_color3{border:1px solid #5EC2CF;}
.right_pillar_color4{border:1px solid #36B3C3;}
.right_pillar_color5{border:1px solid #71D7B7;}
.right_pillar_color6{border:1px solid #4ECDA5;}
.right_pillar_color7{border:1px solid #A9E6A1;}
.right_pillar_color8{border:1px solid #94E08A;}
.right_pillar_color9{border:1px solid transparent;}
.right_pillar_color10{border:1px solid transparent;}
/*颜色 background*/
.right_pillar_bg_1{background:#7196D6;}
.right_pillar_bg_2{background:#4E7CCC;}
.right_pillar_bg_3{background:#5EC2CF;}
.right_pillar_bg_4{background:#36B3C3;}
.right_pillar_bg_5{background:#71D7B7;}
.right_pillar_bg_6{background:#4ECDA5;}
.right_pillar_bg_7{background:#A9E6A1;}
.right_pillar_bg_8{background:#94E08A;}
@media (max-width:767px){.up_downs .left_up_downs p{font-size:0.5rem;}
.right_up_downs .right_up_downs_bottom div{font-size:0.5rem;}
.up_downs .left_up_downs{width:14%;padding:0;}
.right_up_downs{width:86%;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul li .right_pillar_for{width:100%;}
.right_up_downs .right_up_downs_top .right_pillar .right_pillar_ul li .right_pillar_for .right_pillar_fill{width:30%;margin:0 10%;}
}
@media print{.up_downs{width:100% !important;}
.left_up_downs{width:5% !important;}
.right_up_downs{width:95% !important;}
/*颜色 border*/
 .right_pillar_color1{border:1px solid #7196D6 !important;}
.right_pillar_color2{border:1px solid #4E7CCC !important;}
.right_pillar_color3{border:1px solid #5EC2CF !important;}
.right_pillar_color4{border:1px solid #36B3C3 !important;}
.right_pillar_color5{border:1px solid #71D7B7 !important;}
.right_pillar_color6{border:1px solid #4ECDA5 !important;}
.right_pillar_color7{border:1px solid #A9E6A1 !important;}
.right_pillar_color8{border:1px solid #94E08A !important;}
.right_pillar_color9{border:1px solid transparent !important;}
.right_pillar_color10{border:1px solid transparent !important;}
/*颜色 background*/
 .right_pillar_bg_1{background:#7196D6 !important;}
.right_pillar_bg_2{background:#4E7CCC !important;}
.right_pillar_bg_3{background:#5EC2CF !important;}
.right_pillar_bg_4{background:#36B3C3 !important;}
.right_pillar_bg_5{background:#71D7B7 !important;}
.right_pillar_bg_6{background:#4ECDA5 !important;}
.right_pillar_bg_7{background:#A9E6A1 !important;}
.right_pillar_bg_8{background:#94E08A !important;}
.right_pillar_dan{float:none !important;margin:0 auto;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
65.37 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
65.37 KB
立即下载
莫纯燕宁
了解
打赏作者 鼓励作者
jquery特效1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章