就是点击这个按钮，左右滑动，划过以后变成亮色，不然是灰色， 我之前利用边框结合绝对定位去尝试了一下那样容易出现上下错乱的情况，我也试了下原生的range来去写，但是那个取消了默认样式重新更换背景貌似也不行。
请问各位大佬有什么办法去搞吗
追加css 代码 项目目前在用
input[type=range]{
margin-top: 8px;/*上部分的填充值*/
outline: none;
-webkit-appearance: none;/*清除系统默认样式*/
width: 100% !important;
background: -webkit-linear-gradient(#E81A1A, #E81A1A) no-repeat, #ddd; /*背景颜色，俩个颜色分别对应上下，自己尝试下就知道了嗯*/
background-size: 0% 100%;/*设置左右宽度比例*/
height: 3px;/*横条的高度，细的真的比较好看嗯*/
-webkit-box-shadow: 0 #DDDDDD;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;/*清除系统默认样式*/
background: url("../images/jindu.png");
background-size: 100% 100%;
width: 50px;
height: 50px;
position: relative;
}
html 代码
<input id="qrsize" type="range" min="1" max="6" name="qrsize" value="0" step="1" oninput="changeSpeed()" attr-data="1">
没在用的
css
.bnTest {
left: 100px;
width: 500px;
height: 20px;
}
.bnSlide {
width: 500px;
height: 20px;
position: relative;
}
.bnSlide .bnSlidePathway {
background-color: Black;
/* border: 15px #000 dashed;
border-left: transparent;
border-right: transparent;
border-bottom: transparent; */
height: 10px;
width: 100%;
position: relative;
top: 5px;
border-radius:20px;
}
.bnSlide .bnSlidePathway .bnSlideColor {
background-color:#52c2ec;
position: absolute;
top: 0;
/* border: 15px #52c2ec dashed;
border-left: transparent;
border-right: transparent;
border-bottom: transparent; */
width: 100%;
height: 100%;
border-top-left-radius:20px;
border-bottom-left-radius:20px
}
.bnSlide .bnSlideBlock {
background-color: Gray;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
border-radius: 5px;
}
<div class="bnTest"></div>
js
$(function () {
$(".bnTest").bnSlide({ colorData: 2 });
});
(function ($) {
$.fn.bnSlide = function (options) {
var defaults = {
colorData: 0, //原始滑道的有效值
maxWidth: 10, //整个滑道有效值
// Width: 500, //整个容器的宽度
//height: 20//整个容器的高度
};
options = $.extend(defaults, options);
if (options.colorData < 0)
options.colorData = 0;
else if (options.colorData > options.maxWidth)
options.colorData = options.maxWidth;
var obj = this;
var objSlideColor = null; //有效轨道的对象
var objBlock = null; //滑块对象
var objPathway = null; //滑道对象
function print(nowX) {//有效滑道长度colorwidth
var nowData = options.maxWidth * nowX / maxPathway;
nowData = Math.round(nowData);
}
function blockAddress(nowX) {
objBlock.css({ "left": nowX + "px" });
objSlideColor.width(nowX);
}
/**
加载插件
**/
(function () {
var html = "";
html += "<div class='bnSlidePathway'>";
html += "<div class='bnSlideColor'></div>";
html += "</div>";
html += "<div class='bnSlideBlock'></div>";
obj.addClass("bnSlide").html(html);
objSlideColor = $(".bnSlideColor", obj); //有效轨道的长度
objBlock = $(".bnSlideBlock", obj); //滑块对象
objPathway = $(".bnSlidePathway", obj);
})();
var objOffset = obj.offset();
var objLeft = objOffset.left; //滑道的left
var objWidth = obj.width(); //滑道长度
var objBlockWidth = objBlock.width(); //滑块宽度
var maxPathway = objWidth - objBlockWidth; //有效长度
var colorWidth = options.colorData * maxPathway / options.maxWidth; //红色轨道的实际长度
objSlideColor.width(colorWidth);
objBlock.css({ "left": colorWidth });
options.objPrint.val(options.colorData);
$(document).on("mouseup", function () {
$(document).off("mousemove");
});
options.objPrint.on("blur", function () {
var nowData = $(this).val();
if (isNaN(nowData)) {
$(this).css("background-color", "red"); return;
}
if (nowData > options.maxWidth || nowData < 0) {
$(this).css("background-color", "red"); return;
}
$(this).css("background-color", "white");
var nowX = nowData * maxPathway / options.maxWidth;
blockAddress(nowX);
});
objPathway.on("click", function (event) {
var pointX = event.clientX;
var maxLeft=maxPathway+objLeft;
var nowX=0;
if(pointX>=maxLeft) nowX=maxPathway;
else nowX = pointX - objLeft;
blockAddress(nowX);
print(nowX);
});
objBlock.on("mousedown", function (event) {
var pointX = event.clientX; //鼠标坐标x,距浏览器
var blockX = $(this).offset().left; //滑块的left
var pointInBlockW = pointX - blockX; //鼠标在滑块的横向位置
$(document).on("mousemove", function (event) {
pointX = event.clientX; //鼠标坐标
blockX = objBlock.offset().left; //滑块左坐标
var nowX = pointX - pointInBlockW - objLeft; //滑块的新坐标x,相对坐标;鼠标绝对坐标-鼠标在滑块中的位置-最外层left
if(pointX>=(objWidth+objLeft)){//如果鼠标超出滑道的最右边,取最大值
blockAddress(maxPathway);
print(maxPathway);
}
else if(pointX<=objLeft)//如果鼠标超出滑道最左边,取最小值
{
blockAddress(0);
print(0);
}
else if (nowX >= maxPathway) {//如果滑块的当前距离大于等于有效滑道距离,不运动
return;
}
else if (nowX <= 0) {//如果滑块的当前距离小于0,不运动
return;
}
else {
blockAddress(nowX);
print(nowX);
}
});
})
}
})(jQuery);
