简单的游标滑轴实现

Posted unique1319

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的游标滑轴实现相关的知识,希望对你有一定的参考价值。

效果如下:

实现:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script src="../js/lib/jquery-2.2.3.min.js"></script>
        <title></title>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            * {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                }/*使页面无法被选中*/
                
            .menue-list{ width: 260px; margin-left: 20px; margin-top: 10px; margin-bottom: 10px; background-color: #737373;}
                
            .menue-title-small-text-div {
                display: inline-block;
                width: 50px;
                height: 20px;
                margin-bottom: 5px;
                text-align: left;
                }
            
                .menue-text {
                font-family: Microsoft YaHei;
                font-size: 12px;
                font-weight: normal;
                font-style: normal;
                font-stretch: normal;
                line-height: 20px;
                letter-spacing: 0.4px;
                color: #fbfbfb;
                  }
        
            .fl{ float: left;}
            .fr{ float: right;}
            .clear{ clear: both;}
            #menue-slide-1,#menue-slide-2,#menue-slide-3,#menue-slide-4,#menue-slide-5 { position: relative; float: left; margin-top: 5px;}
            .ss-slider {
                position: absolute;
                bottom: -4px;
                color: white;
                font-size: smaller;
                text-align: center;
                cursor: pointer;
                background-image: url("../img/ship_wattle.png");
                background-repeat: no-repeat;
            }
            .ss-wattle {
                background-color: rgba(205, 205, 205, 1);
                border-radius: 4px 4px 4px 4px;
            }
            
            @media(min-width:1440px) and (max-width:1599px) {
                #query-menue-div{ padding: 20px;}
                .menue-title{ margin: 20px 0px; margin-left: 40px;}
                .menue-title-small-text-div{ margin-bottom: 10px;}
                .menue-string{ margin-bottom: 20px;}
                #ship-img-div{ margin-bottom: 20px;}
                .menue-list{  margin-top: 20px; margin-bottom: 20px;}
            }
              @media (min-width:1600px) {
                #query-menue-div{ padding: 30px 20px;}
                .menue-title{ margin: 25px 0px; margin-left: 40px;}
                .menue-title-small-text-div{ margin-bottom: 10px;}
                .menue-string{ margin-bottom: 30px;}
                #ship-img-div{ margin-bottom: 30px;}
                .menue-list{  margin-top: 30px; margin-bottom: 30px;}
            }
            
        </style>

    </head>

    <body>

        <div class="menue-list">
            <div id="menue-title-small-text-div-11" class="menue-title-small-text-div menue-text fl">温度</div>
            <div id="menue-slide-1" ondragstart="return false">
                <div id="w-1" class="ss-wattle" ondragstart="return false"></div>
                <div id="s-1" class="ss-slider" ondragstart="return false"></div>
            </div>
            <div id="menue-title-small-text-div-16" class="menue-title-small-text-div menue-text fr"></div>
            <div class="clear"></div>

            <div id="menue-title-small-text-div-12" class="menue-title-small-text-div menue-text fl">风速</div>
            <div id="menue-slide-2" ondragstart="return false">
                <div id="w-2" class="ss-wattle" ondragstart="return false"></div>
                <div id="s-2" class="ss-slider" ondragstart="return false"></div>
            </div>
            <div id="menue-title-small-text-div-17" class="menue-title-small-text-div menue-text fr"></div>
            <div class="clear"></div>

            <div id="menue-title-small-text-div-13" class="menue-title-small-text-div menue-text fl">能见度</div>
            <div id="menue-slide-3" ondragstart="return false">
                <div id="w-3" class="ss-wattle" ondragstart="return false"></div>
                <div id="s-3" class="ss-slider" ondragstart="return false"></div>
            </div>
            <div id="menue-title-small-text-div-18" class="menue-title-small-text-div menue-text fr"></div>
            <div class="clear"></div>

            <div id="menue-title-small-text-div-14" class="menue-title-small-text-div menue-text fl">3H降水</div>
            <div id="menue-slide-4" ondragstart="return false">
                <div id="w-4" class="ss-wattle" ondragstart="return false"></div>
                <div id="s-4" class="ss-slider" ondragstart="return false"></div>
            </div>
            <div id="menue-title-small-text-div-19" class="menue-title-small-text-div menue-text fr"></div>
            <div class="clear"></div>

            <div id="menue-title-small-text-div-15" class="menue-title-small-text-div menue-text fl">6H降水</div>
            <div id="menue-slide-5" ondragstart="return false">
                <div id="w-5" class="ss-wattle" ondragstart="return false"></div>
                <div id="s-5" class="ss-slider" ondragstart="return false"></div>
            </div>
            <div id="menue-title-small-text-div-20" class="menue-title-small-text-div menue-text fr">22</div>
            <div class="clear"></div>
        </div>

        <script type="text/javascript">
            (function(document) {

                /**
                 *
                 * ss   游标
                 * sw   滑轴
                 *
                 * @param {Object} sw_length            轴长
                 * @param {Object} sw_thickness         轴宽
                 * @param {Object} sw_min               最大刻度
                 * @param {Object} sw_max               最小刻度
                 * @param {Object} ss_init              初始值
                 * @param {ID} Wattle_ID                滑轴id
                 * @param {ID} Slider_ID                游标id
                 */
                $.fn.SS = function(sw_length, sw_thickness, sw_min, sw_max, ss_init, Wattle_ID, Slider_ID) {
                    //            var ss_thickness = ss_thickness * (4 / 3);
                    var ss_thickness = 19;
                    var ss_length = 19;
                    var sw_margin = 0;
                    var ss_position = Math.round((ss_init / (sw_max - sw_min)) * (sw_length - ss_length));
                    var ss_value = Math.round((ss_position - sw_margin) / (sw_length - ss_length) * (sw_max - sw_min) + sw_min);
                    var sv_id = Slider_ID + \'-sv\';

                    $(Wattle_ID).width(sw_length);
                    $(Wattle_ID).height(sw_thickness);
                    $(Slider_ID).width(ss_length);
                    $(Slider_ID).height(ss_thickness);
                    $(Wattle_ID).css("margin", sw_margin);
                    $(Slider_ID).css("left", ss_position);
                    $(Slider_ID).append(\'&nbsp;\');
                    $(Slider_ID).parent().next().text(ss_value);

                    $(Wattle_ID).append("<div id=\'" + sv_id.replace(\'#\', \'\') + "\' style=\'height: 100%; width: " + (ss_position + 2) + "px; background-color: #6cb8ed; border-radius: inherit;\'></div>")

                    var M = false; //鼠标状态
                    var Rx; // 触发对象
                    var t = $(this);

                    t.mousedown(function(event) {
                        Rx = event.pageX - (parseInt(t.css("left")) || 0);
                        t.css("position", "absolute").fadeTo(20, 0.5); //点击改变鼠标状态,并且将div设置透明
                        M = true; // 鼠标处于激活状态
                    });

                    $(document).mouseup(function(event) { // 鼠标松开,
                        M = false; //  鼠标处于释放状态
                        t.fadeTo(20, Oracle游标--cursor_01-简单不带参数实现功能

更新片段中的 RecyclerView

游标简单使用

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

[AndroidStudio]_[初级]_[配置自动完成的代码片段]