JS設(shè)計滑動條效果(二)

2012/11/9 16:04:14作者：佚名來源：網(wǎng)絡

移動端

【實例名稱】

JS設(shè)計滑動條效果(二)

【實例描述】

為了增加頁面的美觀性，可使用滑動條來顯示百分比，而且還可以拖曳滑動條改變百分比的大小。本例學習如何實現(xiàn)這種功能的滑動條。

【實例代碼】

<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=gb2312">
<title>滑塊條-學無憂（denvermotorcycleaccidentlawyer.com）</title>
<style type="text/css">
#trackBar
{
background-color:#666666;
}#trackBar_slider
{
border:1px solid #808080;
background-color:#FFFFFF;
}#trackBar1
{
background-color:blue;
}#trackBar1_slider
{
border:1px solid #808080;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div id="info"></div>
<div id="trackBar1"> </div>
<script type="text/javascript" language="javascript">
//對象未創(chuàng)建完成之前，不能在函數(shù)之中用this
function setTrackBar(trackBar, min, max, barPos)
//指定的div，最小值，最大值和位置
{
this.trackBar = trackBar; //承載滑動條的對象
this.sliderIdStr = trackBar + "_slider"; 
//滑動條
this.trackBarId = document.getElementById(this.trackBar);
//獲取div
this.sliderId = null; //未創(chuàng)建滑動條對象
this.min = (min>=0)?min:0;//最小值不能小于0
this.max = (max>=min)?max:min;//最大值必須大于最小值
this.barPos = (barPos>=min && barPos<=max)?barPos:min;
//位置必須在最大和最小之間
this.orientation = "h"; //設(shè)置對象和滑動條的位置
this.trackBarWidth = 100;
this.trackBarHeight = 10
this.sliderWidth = 10;
this.sliderHeight = 10;
this.Create = Create; 
this.draging = false;
this.offset = 0;
this.BeforeDrag = BeforeDrag;//綁定滑動事件
this.OnDrag = OnDrag;
this.EndDrag = EndDrag;
}
function Create(trackBar1)//創(chuàng)建滑動條的方法
{
this.trackBarId.innerHTML = "<div id=\"" + this.sliderIdStr + 
"\"" + " onmousedown=\"javascript:BeforeDrag(" + trackBar1 + ");
\"" + " style=\"position:relative;cursor:n-resize;\"></div>";
this.sliderId = document.getElementById(this.sliderIdStr);
this.sliderId.style.pixelTop = this.trackBarHeight - 
((this.trackBarHeight-this.sliderHeight)*this.barPos)/
(this.max-this.min) - this.sliderHeight;
this.trackBarId.style.width = this.trackBarWidth; 
//設(shè)置滑動條的初始位置
this.trackBarId.style.height = this.trackBarHeight;
this.sliderId.style.width = this.sliderWidth;
this.sliderId.style.height = this.sliderHeight;
return true;
}var curTrackBar = null;//準備拖拽
function BeforeDrag(trackBar)
{
if (event.button != 1)
//如果不是鼠標左鍵，則返回
{
return;
}
document.body.style.cursor = "n-resize";
//鼠標的樣式
curTrackBar = trackBar;
curTrackBar.draging = true;
curTrackBar.offset = curTrackBar.trackBarId.style.pixelTop + curTrackBar.sliderId.style.pixelTop+curTrackBar.sliderId.offsetHeight- event.clientY;
}
function OnDrag() 
//實現(xiàn)拖拽的方法
{
if(!curTrackBar || !curTrackBar.draging)
{
return;
}
event.returnValue = false;
var phyPos = 0;
if (curTrackBar.orientation !== "h")
{
phyPos = curTrackBar.trackBarId.style.pixelTop + 
curTrackBar.trackBarId.offsetHeight - event.clientY - curTrackBar.offset;
if (phyPos <= 0)
{
phyPos = 0; //如果拖動到最底端
}
else if(phyPos >= (curTrackBar.trackBarId.offsetHeight-
curTrackBar.sliderId.offsetHeight))
{
phyPos = curTrackBar.trackBarId.offsetHeight - 
curTrackBar.sliderId.offsetHeight;
}
//改變滑動條的位置
curTrackBar.sliderId.style.pixelTop = 
curTrackBar.trackBarId.offsetHeight - 
phyPos - curTrackBar.sliderId.offsetHeight;
curTrackBar.barPos = parseInt(((curTrackBar.max-curTrackBar.min)*
phyPos/(curTrackBar.trackBarId.offsetHeight-curTrackBar.sliderId.offsetHeight)));
}OnTrackBarTxt();
}
function EndDrag()//結(jié)束拖拽
{
if (!curTrackBar)
{
return;
}
document.body.style.cursor = "default";
curTrackBar.draging = false;
}function OnTrackBarTxt() //拖拽時，改變滑動條的值
{
document.getElementById("info").innerHTML = 
curTrackBar.barPos+ " / " + curTrackBar.max;
}document.onmousemove = OnDrag;
//鼠標移動時，實現(xiàn)拖拽-開始滑動
document.onmouseup = EndDrag; 
//鼠標離開時，結(jié)束拖拽-即結(jié)束滑動
var trackBarObj1 = new setTrackBar("trackBar1", 0, 100,100);
//配置滑動條，指定最小值和最大值
trackBarObj1.orientation = "v";//滑動條的方法-垂直
trackBarObj1.trackBarWidth = 15;//對象的寬度
trackBarObj1.trackBarHeight = 100;//對象的高度
trackBarObj1.sliderWidth = 15;//滑動條的寬度
trackBarObj1.sliderHeight = 10; //滑動條的高度
trackBarObj1.Create("trackBarObj1");//創(chuàng)建滑動條
</script>
</body>
</html>

【運行效果】

滑動條(二)運行效果

【難點剖析】

本例提供了關(guān)于滑動條的5個常用方法。“setTrackBar”方法用來設(shè)置滾動條的最小值、最大值和位置等?！癈reate”方法用來創(chuàng)建滑動條的承載器和滑動條本身?！癇eforeDrag”方法主要判斷用戶的操作是否為“拖曳”?！癘nDrag”方法表示拖曳過程中滑動條的改變?！癊ndDrag'’方法用來實現(xiàn)拖曳完成后的一些狀態(tài)恢復。這些方法可以直接移植到其他項目中使用。

【源碼下載】

為了JS代碼的準確性，請點擊：JS設(shè)計滑動條效果(二) 進行本實例源碼下載

標簽：滑動條進度條

相關(guān)文章