javascript – 圆形滑块背景不透明
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 圆形滑块背景不透明,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2559字,纯文字阅读大概需要4分钟。
内容图文
![javascript – 圆形滑块背景不透明](/upload/InfoBanner/zyjiaocheng/789/b5649e8d967b4c408dc25b83b06706e8.jpg)
我正在研究一个平台的调查问卷.我们想使用jQuery插件制作一个圆形滑块.有一个问题;这就是滑块现在的样子:
我想要的是一个滑块,白色圆圈是透明的,这样你就可以看到渐变背景.但是..一旦我删除白色圆圈,我得到这个:
我正在使用的jQuery插件叫做roundsliderui.有没有办法用这个插件解决这个问题(使内圈透明)?或者有一个插件,这是一个标准的可能性?我一直在寻找一段时间,但找不到正确的答案.我没有太多时间来编写整个香草的代码.
解决方法:
有一个你要问的例子(取自here)
var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
fn1.apply(this);
var o = this.options, r = o.radius, d = r * 2,
r1 = r - (o.width / 2) - this._border(true),
svgNS = "http://www.w3.org/2000/svg";
this._circum = Math.PI * (r1 * 2);
var $svg = $(document.createElementNS(svgNS, "svg"));
$svg.attr({ "height": d, "width": d });
this.$circle = $(document.createElementNS(svgNS, 'circle')).attr({
"fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "r": r1,
"stroke-width": o.width, "stroke-dasharray": this._circum
}).appendTo($svg);
this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({
"height": d, "width": d, "transform-origin": "50% 50%",
"transform": "rotate(" + (o.startAngle + 180) + "deg)"
}).appendTo(this.innerContainer);
}
var fn2 = $.fn.roundSlider.prototype._changeSliderValue;
$.fn.roundSlider.prototype._changeSliderValue = function (val, deg) {
fn2.apply(this, arguments);
deg = deg - this.options.startAngle;
if (this._rangeSlider) {
this.$svg_box.rsRotate(this._handle1.angle + 180);
deg = this._handle2.angle - this._handle1.angle;
}
var pct = (1 - (deg / 360)) * this._circum;
this.$circle.css({ strokeDashoffset: pct });
}
/// ### ---- ### --------------------- ### ---- ### ///
$("#slider").roundSlider({
width: 35,
radius: 115,
sliderType: "range",
value: "20,70",
startAngle: 90
})
body {
background-color: #ccc;
background-size: 100%;
background-repeat: no-repeat;
}
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-bg-color {
background-color: transparent;
}
.rs-control circle {
/* mention the range color here */
stroke: #02b4ff;
}
.rs-border, .rs-handle {
border: 2px solid white;
}
.rs-handle{
}
.rs-tooltip-text{
font-size: 22px;
font-weight: bold;
color: #ff0202;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />
<div id="root">
<div id="slider"></div>
</div>
内容总结
以上是互联网集市为您收集整理的javascript – 圆形滑块背景不透明全部内容,希望文章能够帮你解决javascript – 圆形滑块背景不透明所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。