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

2012/11/9 16:01:57作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

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

【實例描述】

滑動條用來顯示一個百分比數(shù)據(jù)。本例通過一個類似刻度尺的組件實現(xiàn)滑動條的效果。

【實例代碼】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<TITLE>滑動條-學(xué)無憂（wangbatian.cn）</title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
var objContainsDiv;
var objTrackBar;
var objTrackPath;
var objScaleDiv;
var scaleNumber = 20;
var scaleLenth; //刻度長度
var vLeft;
var vaildLength;//滑塊能夠移動的有效長度
function contentLoad()
{
objContainsDiv = trackDiv;//容器
objTrackBar = createTrack();
objTrackBar = objContainsDiv.appendChild(objTrackBar);
objTrackPath = trackDegree;
objTrackBar.onmousedown = trackBarBeforeMove;
objTrackBar.onmouseup = trackBeforeMouseup;
objTrackPath.onclick = setPos;vaildLength = 
parseInt(objContainsDiv.offsetWidth) - 
parseInt(objTrackBar.offsetWidth) - 2;
scaleLenth = Math.round(parseInt(objContainsDiv.offsetWidth)/scaleNumber);
//手動生成刻度線
for(var i=0;i<scaleNumber - 1;i++){
 objScaleDiv = this.document.createElement("
<div style='position:absolute;left:50;top:13;
font-size:4pt;font-weight:lighter;color:#999999;width:3:'/>");
 objScaleDiv = objContainsDiv.appendChild(objScaleDiv);
 with(objScaleDiv){
style.left = scaleLenth*(i + 1);
innerText = "|";
 }
}
}
function createTrack(){ //創(chuàng)建滑動條
var objBarContainsDiv;
objBarContainsDiv = this.document.createElement("
<div style='position:absolute;left:0;top:0;height:16;width:11;z-index:2;'/>");
//創(chuàng)建矩形區(qū)域
var objBarTop = this.document.createElement("
<div style='position:absolute;left:0;top:0;height:10;width:11;
font-size:1px;border-top:solid 1px #999999;border-right:solid 1px #666666;
border-left:solid 1px #cccccc;z-index:2;background:#cccccc;'>");
objBarTop = objBarContainsDiv.appendChild(objBarTop);
var objPointDiv;
var iScale = 0;
for(var i=0;i<6;i++){ //創(chuàng)建紅色標識區(qū)域，用來指向刻度
 objPointDiv = this.document.createElement("
<div style='position:absolute;background:red;font-size:1px;
z-index:2;border-right:solid 1px #990000;'>");
 iScale = i + 1;
 with(objPointDiv){
style.left = iScale;
style.top = parseInt(objBarTop.style.pixelHeight) + (iScale - 1);
if((parseInt(objBarTop.style.pixelWidth) - 2*iScale)<0){
 break;
}
style.width = parseInt(objBarTop.style.pixelWidth) - 2*iScale;
 }
 objPointDiv = objBarContainsDiv.appendChild(objPointDiv);
}
return objBarContainsDiv;
}
function setPos(){ //單擊滑動條時，設(shè)置滑動條位置
trackBeforeMove();
trackLevel.innerText = Math.round(parseInt(objTrackBar.style.left)
*100/vaildLength) + "%";//顯示刻度數(shù)
}
function trackBarBeforeMove(){//移動滑動條前的準備
vLeft = window.event.x - objTrackBar.style.pixelLeft;
objTrackBar.style.background = "#dddddd";//背景
objTrackBar.setCapture(); //鼠標
objTrackBar.attachEvent("onmousemove", trackBeforeMove); 
//動態(tài)添加移動事件
}
function trackBeforeMove(){//滑塊移動中
var leftPoint;
var pointDividLength;
var vMousePositionX;
if((event.x - objContainsDiv.offsetLeft - 8) > vaildLength || 
event.x<objContainsDiv.offsetLeft) return;vMousePositionX = 
parseInt(event.x) - objContainsDiv.offsetLeft;
leftPoint = Math.floor(vMousePositionX/scaleLenth);
//左邊最近的點序號
pointDividLength = leftPoint*scaleLenth + scaleLenth/2;
window.status = "leftPoint:" + leftPoint + " [vMousePositionX:" + 
vMousePositionX + " pointDividLength:" + pointDividLength + "]";
if(vMousePositionX < pointDividLength){ //粘連到左邊點
 objTrackBar.style.left = leftPoint*scaleLenth;
}
if(vMousePositionX > pointDividLength){ //粘連到右邊點
 objTrackBar.style.left = (leftPoint+1)*scaleLenth;
}
if(parseInt(objTrackBar.style.left)>vaildLength){//移到了右邊界
objTrackBar.style.left = vaildLength;
}
if(parseInt(objTrackBar.style.left)<0){ //移到了左邊界
objTrackBar.style.left = 0;
}
trackLevel.innerText = Math.round(parseInt
(objTrackBar.style.left)*100/vaildLength) + "%";
}
function trackBeforeMouseup(){ //滑動結(jié)束，解除綁定
if(parseInt(trackLevel.innerText.replace("%",""))>100){
objTrackBar.style.left = vaildLength;
trackLevel.innerText = "100%";//不能超出最大刻度100
}else if(parseInt(trackLevel.innerText.replace("%",""))<0){
objTrackBar.style.left = 0;
trackLevel.innerText = "0%";//不能小于最大刻度0
}
objTrackBar.detachEvent("onmousemove", trackBeforeMove);
//撤銷事件綁定
objTrackBar.style.background = "#cccccc"; 
//改變背景色
objTrackBar.releaseCapture(); //釋放鼠標
}
</script>
 </HEAD>
 <BODY onload="contentLoad()">
<div id="trackDiv" style="position:absolute;left:100;top:50;
border:solid 0px #cccccc;width:700;height:23;background:#dddddd;">
 <hr id="trackDegree" size="1" color="#cccccc" 
style="position:absolute;top:16;height:3;border:groove 1px #eeeeee;
background:#666666;z-index:1;">
</div>
<span id="trackLevel" style="position:absolute;left:100;top:30;
width:50;font-size:9pt;color:red;">0%</span>
 </BODY>
</HTML>

【運行效果】

滑動條(一)運行效果

【難點剖析】

本例的重點在于所有的刻度、滑動條、滑動條標識都是動態(tài)創(chuàng)建的。在“createTrack”方法中，“objBarTop”屬性是創(chuàng)建的滑動條標識的上部分，“objPoimDiv”是創(chuàng)建在滑動條下部的紅色指標，通過其可以輕松地看到滑動條的當(dāng)前刻度。

【源碼下載】

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

標簽：滑動條進度條

相關(guān)文章