Javascript -在JQuery滑块上添加-webkit线性渐变时,moz线性渐变中断
TL;DR-webkit线性渐变正在中断-moz线性渐变 这是个难题,我正在使用Jquery滑块插件,上面有两个手柄,我有一个渐变作为背景色,给外部范围一些颜色。我要做的是在滑块移动时更新渐变上的百分比。它可以在Chrome/Safari中使用,但在同时使用-moz和-webkit标记的Firefox中不起作用。将从第一个滑块的位置提取该值 当我只有-moz线性渐变标签时,它可以工作,但一旦我添加了-webkit线性渐变标签,它就会在Firefox中中断 这是密码 HTML: CSS: 这里有一个链接可以查看正在发生的事情和css,因为有很多:)。(在chrome/safari中打开,查看其功能,在firefox中打开,查看其损坏情况)Javascript -在JQuery滑块上添加-webkit线性渐变时,moz线性渐变中断,javascript,jquery,css,slider,linear-gradients,Javascript,Jquery,Css,Slider,Linear Gradients,TL;DR-webkit线性渐变正在中断-moz线性渐变 这是个难题,我正在使用Jquery滑块插件,上面有两个手柄,我有一个渐变作为背景色,给外部范围一些颜色。我要做的是在滑块移动时更新渐变上的百分比。它可以在Chrome/Safari中使用,但在同时使用-moz和-webkit标记的Firefox中不起作用。将从第一个滑块的位置提取该值 当我只有-moz线性渐变标签时,它可以工作,但一旦我添加了-webkit线性渐变标签,它就会在Firefox中中断 这是密码 HTML: CSS: 这里有一
提前感谢:)您只能为给定元素的任何单一样式属性设置一个值。您得到的是在CSS文件中所做的,但这不是
.CSS()
方法所做的。它直接在每个受影响的DOM元素上混淆了样式
对象的属性。因此,当您设置“-moz linear gradient”时,您正在擦除“linear gradient”,而当您设置“-moz linear gradient”时,您正在擦除简单的颜色设置
通过类或其他方式在CSS中设置样式,然后在JavaScript中选择一种或另一种设置时设置类。我修改了小提琴。您需要有多个css调用,而不是多个后台属性。试试这个:这也是一个很好的回答it@DrewLandgrave它仍然无法工作,原因与我在回答中描述的完全相同。@Pointy我正在使用Firefox和fiddle。它类似于在@DrewLandgrave上找到的jQuery调用,那么它应该是什么样子呢?当我在Firefox中尝试小提琴时,我看不到任何渐变。
<div id="traffic-allocation">
<h4 id="traffic-allocation-hed">Traffic Allocation <small>Change by dragging handles right or left and applying changes</small></h4>
<div class="slideContainer">
<div id="slider-direct" class="slider"></div>
</div>
</div>
<div class="labelBox">
<div class="control-box" id="control-box-direct">
<input id="control-direct" type="text" value="35%" class="allocation-control" />
<div class='allocation-control-wrapper'>
<h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control: </h4>
</div>
</div>
</div>
$(function() {
$( '.slider' ).slider({
range: true,
values: [35, 70],
min: 0,
max: 100,
step: 5,
slide: function( e, ui ) {
//Derive calling (class selector) element's ID and set the IDs for its "companion" value displays:
theSegment = e.target.id.slice(7);
theControl = '#control-' + theSegment;
$( theControl ).val( ui.values[ 0 ] + '%' );
var slidercolor = $('#control-direct').val();
$('.ui-slider-horizontal').css({
background: '#0e76bc', /* Old browsers */
background: 'linear-gradient(to right, #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' ,/* W3C */
background: '-moz-linear-gradient(left, #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')', /* FF3.6+ */
background: '-webkit-linear-gradient(left, #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' /* Chrome10+,Safari5.1+ */
})
}
});
h1 {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 18px;
}
body, p{
font-family: Helvetica, Arial;
}
.ui-slider-horizontal{
background: '#0e76bc', /* Old browsers */
background: linear-gradient(to right, #0e76bc 50%,#e78f08 50%); /* W3C *
background: -moz-linear-gradient(left, #0e76bc 50%, #e78f08 50%); /* FF3.6+ */
background: -webkit-linear-gradient(left, #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */
}
.ui-widget-header {
background: none repeat scroll 0 0 #292668;
border: 1px solid #CCCCCC;
color: #292668;
font-weight: bold;
}