zhangm
/
ElectronicReader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        $(function () {
            ScrollerTrack.Init();
        });
        var ScrollerTrack = {
            BodyWidth: 500, MaxValue: 300, CurrentX: 0, CurrentValue: 0,
            Count: 0, Init: function () {
                var mWidth = ScrollerTrack.BodyWidth;
                $(".contain").css("width", mWidth + "px");
                var
                    count = ScrollerTrack.MaxValue / 50;
                ScrollerTrack.Count = count;
                var itemWidth = mWidth / count;
                for (var i = 0; i
                < count
                    ; i++) {
                    var span = $("" + (i + 1) * 50 + "");
                    $(span).css("width", itemWidth + "px").css("margin-left", i * itemWidth + "px");
                    $(".value").append(span);
                }
                ScrollerTrack.Value();
            }, Value: function () {
                var currentValue;
                var isMoving = false;
                ScrollerTrack.CurrentX = $(".track").offset().left;
                $(".track").mousedown(function () {
                    var target = $(this).parent();
                    isMoving = true;
                    $("html,body").mousemove(function (event) {
                        if (isMoving == false) return;
                        var changeX = event.clientX -
                            ScrollerTrack.CurrentX;
                        currentValue = changeX - ScrollerTrack.CurrentX;
                        if (changeX = ScrollerTrack.BodyWidth - 16) {
                            $(target).find(".track").css("margin-left", ScrollerTrack.BodyWidth - 16 + "px");
                            $(target).find(".valueC").css("width", ScrollerTrack.BodyWidth - 16 + "px");
                            $(target).find(".show").css("margin-left",
                                ScrollerTrack.BodyWidth - 31 + "px");
                            $(target).find(".show").html(ScrollerTrack.MaxValue);
                            ScrollerTrack.CurrentValue = ScrollerTrack.MaxValue;
                        } else {
                            $(target).find(".track").css("margin-left",
                                changeX + "px");
                            $(target).find(".valueC").css("width", changeX + "px");
                            $(target).find(".show").css("margin-left",
                                changeX - 15 + "px");
                            var v = ScrollerTrack.MaxValue * ((changeX + 16) / ScrollerTrack.BodyWidth);
                            $(target).find(".show").html(parseInt(v));
                            ScrollerTrack.CurrentValue = parseInt(v);
                        }
                    });
                });
                $("html,body").mouseup(function () {
                    isMoving = false;
                });
            }
        }
    </script>
    <style>
        .main {
            margin: 0 auto;
            margin-top: 100px;
            width: 500px;
            font-family: 微软雅黑;
            -webkit-user-select: none;
        }

        .contain {
            width: 500px;
            height: 40px;
            background-color: #E8E8E8;
        }

        ;
        .track {
            width: 16px;
            height: 46px;
            position: absolute;
            margin: -3px 0 0 0px;
            background-color: #2dacd1;
            cursor: pointer;
        }

        .valueC {
            height: 40px;
            position: absolute;
            margin: 0;
            background-color: #43BFE3;
        }

        .value
        span {
            position: absolute;
            text-align: right;
            height: 40px;
            line-height: 40px;
            color: #808080;
            border-right: 1px solid #dddddd;
        }

        .show {
            width: 45px;
            height: 30px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 30px;
            position: absolute;
            opacity: 0.9;
            margin-top: -38px;
            margin-left: -15px;
        }
    </style>
</head>
<body>
<div>
    <h1>首页</h1>
	<input type="range" id="slider" name="slider" min="0" max="100" step="1">
</div>

</body>
</html>