jquery easyui slider 滚动条 改为按年份滚动 类似谷歌地球样式

 

特别注意：

1注意 F12查看： $('#sliderID2') 与$('.slider-h')在html中不是父子级，而是兄弟元素!!!

$('#sliderID2') 下一个元素就是 $('.slider-h')；

$('.slider-h')可以改为$('#sliderID2').next() 

2  $('#sliderID2').next()方法执行时，next对于的html还没渲染成功，所以要加延时。

    //setTimeout(function () {

    //    $('#sliderID2').next().css("background-color", "#333");

    //}, 1000)

 3

$('.slider-h').hover(

        function () {//移入

　　　 //在同时使用两个滑动条时，会有部分代码都有样式.slider-h

            //但是这里的this却是唯一的，这里代表$('#sliderID2').next()，不知是巧合还是必然

　　　 //$('.slider-h').hover可以改为$('#sliderID2').next() .hover

      }

);

   /************slider滚动条******开始*************/
var mSlider;
var mSliderView;



function getSliderValue(value) {
    var yearList = arrayDeepCopy(mYears);//sort 会改变原始数组排序
    var sliderValue = yearList.sort(function (a, b) {
        return Math.abs(a - value) - Math.abs(b - value);
    })[0];

    return sliderValue;
}

     //添加一个div
function addSliderOnMap(parent) {
    var bar = document.createElement('div');
    bar.id = "sliderID2";
    //bar.className = 'map-slider';
    parent.appendChild(bar);
    //mSliderView = bar;
}
     //初始化滑动条，添加鼠标移入移出事件改变样式
function addSlider() {

    var sliderDataList2 = [mYears[0], mYears[mYears.length - 1]];
    $('#sliderID2').slider({
        mode: 'h',//声明滚动条类型。可用值有：'h'(水平)、'v'(垂直)。
        showTip: true,
        range: false,
        rule: sliderDataList2,//显示标签旁边的滑块，'|' — 只显示一行。
        value: sliderDataList2[0],
        min: sliderDataList2[0],
        max: sliderDataList2[1],
        step: 1,
        tipFormatter: function (value) {
            //setTimeout(function () {
            //    $('.slider-handle').css("opacity", 0.6);//一闪一闪太刺眼了
            //},10)/

            var value1 = getSliderValue(value);
            return value1;
            //return '<span id="tipID" style="color:white">' + value1 + '</span>';
        },
        onComplete: function (value) {

            $('.slider-handle').css("opacity", 0.6);//问题：圆圈透明度滑动时会自动变为1，需要反复更改。
            var value2 = getSliderValue(value);
            if (value2 != mCurrentYear) {
                selectYear(value2)
            }

        },
        onChange: function (value) {
            //console.log('onChange', value)
            //console.log('onChange2', getSliderValue(value))
        }

    });
    //注意 F12查看： $('#sliderID2') 与$('.slider-h')在html中不是父子级，而是兄弟元素，$('#sliderID2') 下一个就是$('.slider-h')
    //next()方法执行时，next对于的html还没渲染成功，所以要加延时。
    //setTimeout(function () {
    //    $('#sliderID2').next().css("background-color", "#333");
    //}, 1000)
 
    //因为不是父子级关系， map-slider样式加到id上无效，所有加到.slider-h级别上。 
    //如果同时使用两个滚动条且初始样式不同，下面代码需要改为通过$("#sliderID2").next()来改变
    $('.slider-h').addClass("map-slider");
    $('.map-slider').css("position", "absolute");
    $('.map-slider').css("height", "45px");
    $('.map-slider').css("padding", "20px 20px 1px 20px");
    $('.map-slider').css("top", "60px");
    $('.map-slider').css("left", "15px");
    $('.map-slider').css("z-index", 11);
    $('.map-slider').css("width", "200px");
    $('.slider-rulelabel span').css("display", "none");//隐藏最大最小年份
    $('.slider-rule').css("position", "fixed");//去掉竖线
    $('.slider-rule').css("top", "0px");//去掉竖线
    $('.slider-rulelabel').css("position", "relative");//最大最小值上调
    $('.slider-rulelabel').css("top", "8px");//最大最小值上调
    $('.slider-inner').css("height", "7px");//修改滑动条高度
    $('.map-slider').css("border-radius", "5px");
    $('.slider-inner').css("background", "#fafafa");
    $('.map-slider').css("background-color", "whitesmoke");
    $('.map-slider').css("opacity", 0.7);//整体透明度
    $('.slider-handle').css("opacity", 0.6);//圆圈透明度
 
    //$('.map-slider').css("border", "1px solid white");
    //$('.slider-inner').css("border-color", "white");
    //$('.slider-inner').css("background", "bottom");
    $('.slider-h').hover(
        function () {//移入
            //this是唯一的，这里代表$('#sliderID2').next()，不知是巧合还是必然
            //$('.slider-h')可以改为$('#sliderID2').next() 
            $(this).find('.slider-handle').css("opacity", 0.6);
            //$(that).find('.map-slider').css("background-color", "#333");
            $(this).css("background-color", "#333");
            $(this).find('.slider-rulelabel span').css("color", "white");
            $(this).find('.slider-rulelabel span').css("display", "none");
            $(this).find('.slider-inner').css("color", "white");
            // $('.slider-tip').css("color", "white");//.slider-inner 会覆盖它，所以不需要了。
        },
        function () {//移出
            //$(that).find('.map-slider').css("background-color", "whitesmoke");
            $(this).css("background-color", "whitesmoke");
            $(this).find('.slider-inner').css("color", "black");
            $(this).find('.slider-rulelabel span').css("display", "none");
            $(this).find('.slider-handle').css("opacity", 0.6);
            //$('.map-slider').css("background-color", "");//有效

        }
    );


}
     /************slider******结束*************/

 

  鼠标移入移出 效果：