vue或者純js
uj5u.com熱心網友回復：
iview的面板分割跟你這原理應該是差不多的吧，可以改改用uj5u.com熱心網友回復：
做了一個，還有些小問題，你看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://bbs.csdn.net/Script/jquery-easyui%201.4.4/themes/default/easyui.css" rel="stylesheet" />
<link href="https://bbs.csdn.net/Script/jquery-easyui%201.4.4/themes/icon.css" rel="stylesheet" />
<style>
.box {
height: 50px;
overflow: hidden;
display: table-cell;
margin: 0 auto;
padding: 0;
position: absolute;
top: 0;
left: 0;
font-size: 40px;
text-align: center;
vertical-align: middle;
color: white;
text-shadow: 3px 3px 2px #333;
}
</style>
</head>
<body>
<div id="main" style="width:1000px; margin:20px; position:relative;">
<div class='box' style="background-color:#ffd800; border-radius:10px 0 0 10px;"></div>
<div class='box' style="background-color:#ff6a00; border-radius:0px 0 0 0px;"></div>
<div class='box' style="background-color:#4cff00; border-radius:0px 0 0 0px;"></div>
<div class='box' style="background-color:#0094ff; border-radius:0px 0px 0 0px;"></div>
<div class='box' style="background-color:#5f1475; border-radius:0px 10px 10px 0px;"></div>
</div>
</body>
</html>
<script src="https://bbs.csdn.net/Script/jquery-1.11.3.min.js"></script>
<script src="https://bbs.csdn.net/Script/jquery-easyui%201.4.4/jquery.easyui.min.js"></script>
<script src="https://bbs.csdn.net/Script/easyuiExtend.js"></script>
<script>
var data = [10, 20, 50, 11, 66];
var sum = data.reduce((prev, item) => { return prev + item; }, 0);
var boxs = $('.box');
function Init(i) {
data.forEach((n, index, arr) => {
$(boxs[index]).css({
width: 1000 * n / sum + 'px',
left: index === 0 ? 0 : (boxs[index - 1].offsetLeft + boxs[index - 1].offsetWidth) + 'px'
});
console.log(JSON.stringify($(boxs[index]).css('width')));
$(boxs[index]).text((100 * n / sum).toFixed(0) + '%');
});
}
Init();
boxs.resizable({
maxWidth: 800,
maxHeight: 600,
minWidth: 20,
handles: 'e,w',
onResize: function (e) {
var index = $(this).index();
var dir = e.data.dir === 'e' ? 1 : -1;
if (data[index + dir] + data[index] - e.data.width * sum / 1000 < 20) return false;
data[index + dir] += data[index] - e.data.width * sum / 1000;
data[index] = e.data.width * sum / 1000;
Init(index);
}, onStopResize: Init
});
</script>
uj5u.com熱心網友回復：
滑塊驗證：https://gitee.com/tcweidao/slide-verification轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/106744.html
標籤：JavaScript