jQuery鼠标拖动调整数字大小
分类：实例代码
本章节分享一段代码实例，它实现了使用鼠标拖动调整数字大小的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#Main {
width: 70%;
height: 300px;
margin: 0 auto;
margin-top: 10px;
}
#scrollBar {
width: 80%;
height: 10px;
background-color: #ccc;
margin: 0 auto;
margin-top: 50px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
cursor: pointer;
}
#scroll_Track {
width: 0px;
height: 10px;
background-color: #ff4400;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
#scroll_Thumb {
height: 25px;
width: 25px;
background-color: #efefef;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 5px #ccc;
-moz-box-shadow: 0px 0px 5px #ccc;
box-shadow: 0px 0px 5px #ccc;
position: absolute;
margin-top: -18px;
cursor: pointer;
}
#scroll_Thumb:hover {
background-color: #ff4400;
border: 1px solid #fff;
}
#progressBar {
width: 80%;
height: 10px;
background-color: #ccc;
margin: 0 auto;
margin-top: 50px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
#progressBar_Track {
width: 200px;
height: 10px;
background-color: #ff4400;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
#beian {
text-align: center;
float: left;
width: 100%;
margin-top: 50px
}
#beian a {
color: gray;
font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
}
.progressTime {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position: absolute;
_position: fixed;
left: 25%;
top:25%;
Z-INDEX: 2;
border: 1px solid gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: white;
background: #000;
width: 660px;
height:200px;
padding-top: 0px;
padding-bottom: 0px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//设置最大值
ScrollBar.maxValue = 100;
//初始化
ScrollBar.Initialize();
//设置最大值
ProgressBar.maxValue = 100;
//设置当前刻度
var index = 0;
var mProgressTimer = setInterval(function() {
index += 2;
ProgressBar.SetValue(index);
}, 100);
});
var ScrollBar = {
value: 20,
maxValue: 100,
step: 1,
currentX: 0,
Initialize: function() {
if (this.value > this.maxValue) {
alert("给定当前值大于了最大值");
return;
}
this.GetValue();
$("#scroll_Track").css("width", this.currentX + 2 + "px");
$("#scroll_Thumb").css("margin-left", this.currentX + "px");
this.Value();
$("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
},
Value: function() {
var valite = false;
var currentValue;
$("#scroll_Thumb").mousedown(function() {
valite = true;
$(document.body).mousemove(function(event) {
if (valite == false) return;
var changeX = event.clientX - ScrollBar.currentX;
currentValue = changeX - ScrollBar.currentX - $("#Demo").offset().left;
$("#scroll_Thumb").css("margin-left", currentValue + "px");
$("#scroll_Track").css("width", currentValue + 2 + "px");
if ((currentValue + 25) >= $("#scrollBar").width()) {
$("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 + "px");
$("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");
ScrollBar.value = ScrollBar.maxValue;
} else if (currentValue <= 0) {
$("#scroll_Thumb").css("margin-left", "0px");
$("#scroll_Track").css("width", "0px");
} else {
ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
}
$("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
});
});
$(document.body).mouseup(function() {
ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));
valite = false;
if (ScrollBar.value >= ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue;
if (ScrollBar.value <= 0) ScrollBar.value = 0;
$("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);
});
},
GetValue: function() {
this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);
}
}
var ProgressBar = {
maxValue: 100,
value: 20,
SetValue: function(aValue) {
this.value = aValue;
if (this.value >= this.maxValue) this.value = this.maxValue;
if (this.value <= 0) this.value = 0;
var mWidth = this.value / this.maxValue * $("#progressBar").width() + "px";
$("#progressBar_Track").css("width", mWidth);
$("#progressBarTxt").html(this.value + "/" + this.maxValue);
}
}
</script>
</head>
<body>
<div id="Demo" class="progressTime" >
<div id="Main">
<div id="scrollBar">
<div id="scroll_Track"></div>
<div id="scroll_Thumb"></div>
</div>
<p id="scrollBarTxt" style="text-align:center;"></p>
<div id="progressBar">
<div id="progressBar_Track"></div>
</div>
<p id="progressBarTxt" style="text-align:center;"></p>
</div>
</div>
</body>
</html>
jQuery鼠标拖动调整数字大小，这样的场景在实际项目中还是用的比较多的，关于jQuery鼠标拖动调整数字大小就介绍到这了。
jQuery鼠标拖动调整数字大小属于前端实例代码，有关更多实例代码大家可以查看。