|
|
@@ -2,25 +2,138 @@
|
|
|
<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" />
|
|
|
+ <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();
|
|
|
+ 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>
|
|
|
- <ul class="mui-table-view mui-table-view-chevron">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- <a class="mui-navigate-right" href="pages/bookstand.html">
|
|
|
- 书架
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
-
|
|
|
+<div>
|
|
|
+ <h1>首页</h1>
|
|
|
+ <!-- <ul class="mui-table-view mui-table-view-chevron">
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
+ <a class="mui-navigate-right" href="pages/bookstand.html">
|
|
|
+ 书架
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>-->
|
|
|
+ <input type="range" id="slider" name="slider" min="0" max="100" step="1">
|
|
|
+</div>
|
|
|
+
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
