console
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖动玩圆角</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui, shrink-to-fit=no">
<style>
* {margin: 0;padding: 0;list-style: none;}
.demo_show,
.ctrl_bar {
position: absolute;
top: 20px;
left: 50%;
width: 300px;
height: 300px;
margin-left: -150px;
background-color: #dfdfdf;
}
.ctrl_bar {z-index: 2;background: none;}
.ctrl_bar label {
position: absolute;
top: 0;
left: -120px;
width: 90px;
padding: 5px 0;
text-align: center;
border: 1px solid #71BB3B;
background-color: #95F74E;
cursor: pointer;
}
.ctrl_bar label:nth-of-type(2) {
left: auto;
right: -120px;
}
.ctrl_bar label:nth-of-type(3) {
top: auto;
bottom: 0;
right: -120px;
left: auto;
}
.ctrl_bar label:nth-of-type(4) {
top: auto;
bottom: 0;
}
.ctrl_bar input {
margin-right: 5px;
vertical-align: 1px;
}
.demo_show input {
display: none;
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px dashed #666;
-webkit-appearance: none;
outline: 0 none;
transition: all 200ms linear;
z-index: 99;
}
.demo_show:hover input:hover {
border-bottom-width: 2px;
border-bottom-color: #f00;
}
.demo_show input:nth-of-type(1) {
top: 0;
left: 0;
}
.demo_show input:nth-of-type(2) {
top: 0;
left: -100%;
transform: rotateY(180deg);
transform-origin: right center;
}
.demo_show input:nth-of-type(3) {
top: 100%;
left: 0;
transform: rotateY(180deg) rotateZ(90deg);
transform-origin: right center;
}
.demo_show input:nth-of-type(4) {
top: 100%;
left: 100%;
transform: rotateY(180deg) rotateZ(-90deg);
transform-origin: left center;
}
.demo_show input:nth-of-type(5) {
top: 100%;
left: -100%;
transform: rotateY(180deg);
transform-origin: right center;
}
.demo_show input:nth-of-type(6) {
top: 100%;
left: 0;
}
.demo_show input:nth-of-type(7) {
top: 100%;
left: 0;
transform: rotateY(180deg) rotateZ(-90deg);
transform-origin: left center;
}
.demo_show input:nth-of-type(8) {
top: 100%;
left: -100%;
transform: rotateY(180deg) rotateZ(90deg);
transform-origin: right center;
}
#css_content,
#radius_style {
padding-top: 20px;
padding-left: 20px;
font-size: 18px;
font-family: monospace;
line-height: 1.5;
color: #f00;
}
#css_content span,
#radius_style span {
color: #666;
}
.btn {
padding: 350px 0 10px;
text-align: center;
}
.btn label {
font-size: 18px;
font-weight: bold;
font-family: monospace;
}
.btn label input {
width: 80px;
height: 24px;
margin-right: 5px;
line-height: 24;
}
#hide_range,
#show_range {
width: 120px;
height: 40px;
margin: 0 10px;
text-align: center;
font-size: 15px;
color: #fff;
border: 1px solid #2161C1;
background-color: #3385ff;
cursor: pointer;
}
#hide_range:hover {
background-color: #1C53A5;
}
#show_range {
background-color: #8C4507;
}
#show_range:hover {
background-color: #B96115;
}
</style>
</head>
<body>
<div class="ctrl_bar" id="ctrl_bar">
<label id="c0"><input type="radio" name="sel_bar">左上 ↖</label>
<label id="c1"><input type="radio" name="sel_bar">右上 ↗</label>
<label id="c2"><input type="radio" name="sel_bar">右下 ↘</label>
<label id="c3"><input type="radio" name="sel_bar">左下 ↙</label>
</div>
<div class="demo_show" id="demo_show">
<input type="range" min="0" max="300" step="1" value="0" id="i0">
<input type="range" min="0" max="300" step="1" value="0" id="i1">
<input type="range" min="0" max="300" step="1" value="0" id="i2">
<input type="range" min="0" max="300" step="1" value="0" id="i3">
<input type="range" min="0" max="300" step="1" value="0" id="i4">
<input type="range" min="0" max="300" step="1" value="0" id="i5">
<input type="range" min="0" max="300" step="1" value="0" id="i6">
<input type="range" min="0" max="300" step="1" value="0" id="i7">
</div>
<div class="btn" id="btn"><button type="button" id="hide_range">隐藏拖动柄</button> <button type="button" id="show_range">显示拖动柄</button> <label for="canvas_w">width: <input type="number" id="canvas_w" min="300" step="10" value="300"></label> <label for="canvas_h">height: <input type="number" id="canvas_h" min="300" step="10" value="300"></label></div>
<p id="css_content"></p>
<ul id="radius_style">
<li id="radius_style_tl"></li>
<li id="radius_style_tr"></li>
<li id="radius_style_br"></li>
<li id="radius_style_bl"></li>
</ul>
<script>
window.onload = function() {
var ds = document.getElementById("demo_show"),
css_con = document.getElementById("css_content"),
radius_tl = document.getElementById("radius_style_tl"),
radius_tr = document.getElementById("radius_style_tr"),
radius_br = document.getElementById("radius_style_br"),
radius_bl = document.getElementById("radius_style_bl"),
hide_range = document.getElementById("hide_range"),
show_range = document.getElementById("show_range"),
ctrl_bar = document.getElementById("ctrl_bar"),
cw = document.getElementById("canvas_w"),
ch = document.getElementById("canvas_h"),
btn_box = document.getElementById("btn"),
borderR = new Array(),
i,j;
cw.onchange = function() {
ctrl_bar.style.width = this.value + "px";
ctrl_bar.style.marginLeft = -this.value/2 + "px";
ds.style.width = this.value + "px";
ds.style.marginLeft = -this.value/2 + "px";
ds.children[1].max = this.value;
ds.children[4].max = this.value;
ds.children[5].max = this.value;
ds.children[0].max = this.value;
}
ch.onchange = function() {
ctrl_bar.style.height = this.value + "px";
ds.style.height = this.value + "px";
ds.children[7].max = this.value;
ds.children[2].max = this.value;
ds.children[3].max = this.value;
ds.children[6].max = this.value;
ds.children[2].style.width = this.value + "px";
ds.children[2].style.left = cw.value - this.value + "px";
ds.children[3].style.width = this.value + "px";
ds.children[6].style.width = this.value + "px";
ds.children[7].style.width = this.value + "px";
ds.children[7].style.left = -this.value + "px";
btn_box.style.paddingTop = parseInt(this.value) + 50 + "px";
}
for(k=0;k<ctrl_bar.children.length;k++){
ctrl_bar.children[k].onclick = function() {
if(this.children[0].checked) {
for(a=0;a<ds.children.length;a++){
ds.children[a].style.display = "none";
}
if(Number(this.id.slice(1,2)) == 0){
ds.children[0].style.display = "block";
ds.children[7].style.display = "block";
}
if(Number(this.id.slice(1,2)) == 1){
ds.children[1].style.display = "block";
ds.children[2].style.display = "block";
}
if(Number(this.id.slice(1,2)) == 2){
ds.children[3].style.display = "block";
ds.children[4].style.display = "block";
}
if(Number(this.id.slice(1,2)) == 3){
ds.children[5].style.display = "block";
ds.children[6].style.display = "block";
}
}
}
}
hide_range.onclick = function() {
for(a=0;a<ds.children.length;a++){
ds.children[a].style.display = "none";
}
}
show_range.onclick = function() {
for(a=0;a<ds.children.length;a++){
ds.children[a].style.display = "block";
}
}
for(i=0;i<ds.children.length;i++){
if(i%2){
ds.children[i].onchange = function() {
borderR[this.id.slice(1,2)] = this.value;
for(j=0;j<=ds.children.length;j++){
if(borderR[j]==undefined) borderR[j] = 0;
result = borderR[0] + "px " + borderR[2] + "px " + borderR[4] + "px " + borderR[6] + "px / " + borderR[7] + "px " + borderR[1] + "px " + borderR[3] + "px " + borderR[5] + "px";
ds.style.borderRadius = result;
}
if(borderR[0] == 0 && borderR[2] == 0 && borderR[4] == 0 && borderR[6] == 0) {
alert("至少先选择一下其他几个部分的圆角属性吧～");
result = "";
ds.style.borderRadius = result;
}
css_con.innerHTML = "<span>border-radius:</span> " + result;
radius_tl.innerHTML ="<span>border-top-left-radius:</span> " + ds.style.borderTopLeftRadius;
radius_tr.innerHTML ="<span>border-top-right-radius:</span> " + ds.style.borderTopRightRadius;
radius_br.innerHTML ="<span>border-bottom-right-radius:</span> " + ds.style.borderBottomRightRadius;
radius_bl.innerHTML ="<span>border-bottom-left-radius:</span> " + ds.style.borderBottomLeftRadius;
}
}else{
ds.children[i].onchange = function() {
borderR[this.id.slice(1,2)] = this.value;
for(j=0;j<=ds.children.length;j++){
if(borderR[j]==undefined) borderR[j] = 0;
if(borderR[1] != 0 || borderR[3] != 0 || borderR[5] != 0 || borderR[7] != 0) {
result = borderR[0] + "px " + borderR[2] + "px " + borderR[4] + "px " + borderR[6] + "px / " + borderR[7] + "px " + borderR[1] + "px " + borderR[3] + "px " + borderR[5] + "px";
}else{
result = borderR[0] + "px " + borderR[2] + "px " + borderR[4] + "px " + borderR[6] + "px";
}
ds.style.borderRadius = result;
}
css_con.innerHTML = "<span>border-radius:</span> " + result;
radius_tl.innerHTML ="<span>border-top-left-radius:</span> " + ds.style.borderTopLeftRadius;
radius_tr.innerHTML ="<span>border-top-right-radius:</span> " + ds.style.borderTopRightRadius;
radius_br.innerHTML ="<span>border-bottom-right-radius:</span> " + ds.style.borderBottomRightRadius;
radius_bl.innerHTML ="<span>border-bottom-left-radius:</span> " + ds.style.borderBottomLeftRadius;
}
}
}
}
</script>
</body>
</html>