html 可重复使用的滑块
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 可重复使用的滑块相关的知识，希望对你有一定的参考价值。
function slider()
{
var margin = {top: 5, left: 15, right: 10, bottom: 5},
width = 300 - margin.left - margin.right,
height = 40 - margin.top - margin.bottom,
brush = d3.svg.brush(),
handle, slider,
value = 0,
upd = function(d){value = d;},
cback = function(d){};
var x = d3.scale.linear()
.domain([-1,1])
.range ([0,width])
.clamp(true);
function chart(el)
{
brush.x(x).extent([0,0])
.on("brush", brushed);
var svg = el.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class","x axis")
.attr("transform", "translate(0,"+height/2+")")
.call(d3.svg.axis().scale(x).orient("bottom").tickSize(0).tickPadding(12));
slider = svg.append("g")
.attr("class","slider")
.call(brush);
slider.selectAll(".extent,.resize").remove();
slider.select(".background").attr("height",height)
handle = slider.append("circle")
.attr("class","handle")
.attr("transform", "translate(0,"+height/2+")")
.attr("cx",x(value))
.attr("r",9);
function brushed()
{
if (d3.event.sourceEvent) value = x.invert(d3.mouse(this)[0]);
upd(value);
cback();
}
upd = function(v)
{
brush.extent([v,v]);
value = brush.extent()[0];
handle.attr("cx",x(value));
}
}
chart.margin = function(_) { if (!arguments.length) return margin; margin = _; return chart; };
chart.callback = function(_) { if (!arguments.length) return cback; cback = _; return chart; };
chart.value = function(_) { if (!arguments.length) return value; upd(_); return chart; };
return chart;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis { font: 10px sans-serif; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.axis .domain { fill: none; stroke: #000; stroke-opacity: .3; stroke-width: 10px; stroke-linecap: round; }
.axis .halo { fill: none; stroke: #ddd; stroke-width: 8px; stroke-linecap: round; }
.slider .handle { fill: #fff; stroke: #000; stroke-opacity: .5; stroke-width: 1.25px; pointer-events: none; }
</style>
<body>
<div id="x1">X<sub>1</sub></div><br>
<div id="x2">X<sub>2</sub></div><br>
<div id="x3">X<sub>3</sub></div><br>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="Slider.js"></script>
<script>
function Constr(src,d1,d2)
{
var s_sq = Math.pow(src.value(),2),
d_sq = Math.pow( d1.value(),2) + Math.pow( d2.value(),2);
if(d_sq > 0)
{
var a = Math.sqrt((1-s_sq)/d_sq);
d1.value(a*d1.value());
d2.value(a*d2.value());
}
else
{
var a = Math.sqrt((1-s_sq)/2);
d1.value(a);
d2.value(a);
}
}
var s1 = slider(), s2 = slider(), s3 = slider();
s1.value(1.);
s1.callback(function(){Constr(s1,s2,s3);})
s2.callback(function(){Constr(s2,s1,s3);})
s3.callback(function(){Constr(s3,s1,s2);})
d3.select("#x1").append("svg").call(s1);
d3.select("#x2").append("svg").call(s2);
d3.select("#x3").append("svg").call(s3);
</script>
</body>
以上是关于html 可重复使用的滑块的主要内容，如果未能解决你的问题，请参考以下文章