jQuery刻度尺滚动滑块插件
為什么80%的碼農都做不了架構師？>>> ??
jQuery刻度尺滾動滑塊插件
需要用到一個刻度尺插件，網上找來找去都是那幾種，所以用jQuery自己寫了一個。
<!doctype html>
<html>
?
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style>
.mui-content { background: #e8e8e8;}
#main {
position: relative;
margin-left: 50%;
margin-top: 100px;
width: 2560px;
font-family: 微軟雅黑;
-webkit-user-select: none;
background: #e8e8e8;
height: 100px;
}
#contain {
position: absolute;
top: 0px;
right: 0px;
width: 2560px;
height: 50px;
background-color: #fff;
/*配置marginRight=560px-1px,血糖值為7.0*/
margin-right: 559px;
}
#track {
position: absolute;
top: 0px;
left: 0px;
width: 2px;
height: 56px;
margin: -3px 0 0 0px;
background-color: red/*#2dacd1*/;
cursor: pointer;
}
#value>span {
position: absolute;
text-align: right;
height: 40px;
line-height: 80px;
color: #808080;
border-right: 1px solid #ddd;
}
#value>span span {
position: absolute;
height: 30px;
border-right: 1px solid #ddd;
}
#show {
width: 45px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
left: 0px;
top: 0px;
opacity: 0.9;
margin-top: -38px;
margin-left: -20px;
}
.f14 { font-size: 14px;}
.c5, a.c5 { color: #666;}
?
</style>
</head>
?
<body>
<header class="mui-bar mui-bar-nav">
? ? <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c5"></a>
? ? <h1 class="mui-title mui-text-left c5">手動記錄</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded f14 c5">
<span></span>血糖導入<span class="mui-icon mui-icon-arrowright mui-pull-right"></span><span class="mui-pull-right">掌糖設備</span>
</div>
<div id="main">
<div id="contain">
<div id="value"></div>
</div>
<div id="show">7.0</div>
<div id="track"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
?
$(function(){ScrollerTrack.Init();});
var ScrollerTrack={
BodyWidth: 2560,//總寬度
MaxValue: 32.0,//厘米最大值
CurrentX: 0,//移動距離
CurrentValue: 0,//移動的刻度數
Count: 0,//厘米刻度數量
SCALE: 10,//一厘米有多少毫米刻度
Init:function(){
var mWidth=ScrollerTrack.BodyWidth;//刻度計總的寬度
$("#contain").css("width",mWidth+"px");//主容器寬度
//厘米刻度數量=最大值除以1
var count=ScrollerTrack.MaxValue/1;? ?
//賦值厘米刻度數量
ScrollerTrack.Count=count;
//一個厘米的寬度=總寬度除以厘米數量
var itemWidth=mWidth/count;
//一厘米有多少個毫米
var scale = ScrollerTrack.SCALE;
//毫米寬度=一厘米寬度除以10
var dialsWidth = itemWidth/10;
//循環渲染頁面，顯示刻度
for(var i=0;i<count;i++){
? var span=$("<span>"+(i+1)+".0"+"</span>");
? $(span).css("width",itemWidth+"px").css("margin-left",i*itemWidth+"px").css("color","#55bfc5");
? $("#value").append(span);
? for(var r=0;r<scale;r++){
var dials=$("<span></span>");
$(dials).css("width",dialsWidth+"px").css("margin-left",r*dialsWidth+"px").css("left","0px");
$(span).append(dials);
}
}
ScrollerTrack.Value();
},
//取值
Value: function(){
? ? var currentValue;
? ? var isMoving=false;
? ? $("#contain").mousedown(function(e) {
? ? //點擊屏幕時刻度尺的右margin值
? ? var val = parseInt($("#contain").css('marginRight'));
? ? var target=$(this).parent();
? ? //拖動開始時的x坐標
? ? var downX = e.clientX;
? ? isMoving=true;
? ? $("html,body").mousemove(function(event) {
? ? ScrollerTrack.CurrentX = val;
? ? if(isMoving==false)return;
? ? //移動的x軸距離=拖動開始的X坐標-拖動結束的X坐標，正數是左滑動，負數是右滑動
? ? var changeX = downX - event.clientX;
? ? //左滑動
? ? if(changeX >= 0){
? ? ScrollerTrack.CurrentX += changeX;
? ? //右滑動取正數
? ? }else{
? ? //取正數
? ? changeX = -changeX;
? ? ScrollerTrack.CurrentX -= changeX;
? ? }
? ? if(ScrollerTrack.CurrentX<=0){
? ? $(target).find("#contain").css("margin-right", "0px");
? ? $(target).find("#show").html(0);
? ? $("#numbox").html(0);
? ? ScrollerTrack.CurrentValue=0;
? ? ScrollerTrack.CurrentX = 0;
? ? }
? ? else if(ScrollerTrack.CurrentX>= ScrollerTrack.BodyWidth-1){
? ? $(target).find("#contain").css("margin-right", ScrollerTrack.BodyWidth-1 + "px");
? ? $(target).find("#show").html(ScrollerTrack.MaxValue);
? ? $('#numbox').html(ScrollerTrack.MaxValue);
? ? ScrollerTrack.CurrentValue=ScrollerTrack.MaxValue;
? ? ScrollerTrack.CurrentX = ScrollerTrack.MaxValue;
? ? }
? ? else{
$(target).find("#contain").css("margin-right", ScrollerTrack.CurrentX +"px");
var v=ScrollerTrack.MaxValue*(ScrollerTrack.CurrentX/ScrollerTrack.BodyWidth);
$(target).find("#show").html(parseFloat(v).toFixed(1));
$('#numbox').html(parseFloat(v).toFixed(1));
ScrollerTrack.CurrentValue=parseFloat(v).toFixed(1);
? ? }
? ? });
});
?
?
$("html,body").mouseup(function() {
? isMoving=false;
});
}
}
</script>
</body>
?
</html>
轉載于:https://my.oschina.net/af666/blog/813617
總結
以上是生活随笔為你收集整理的jQuery刻度尺滚动滑块插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php基础：查询程序运行时间并且把科学计
- 下一篇： 无人值守自动装机