实例名称

JS设计滑动条效果一

实例描述

滑动条用来显示一个百分比数据。本例通过一个类似刻度尺的组件实现滑动条的效果。

实例代码

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"HTMLu00a0HEADTITLE滑动条-学无忧 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 contentLoadobjContainsDiv = trackDiv;//容器objTrackBar = createTrack;objTrackBar = ;

objTrackPath = trackDegree; = trackBarBeforeMove; = trackBeforeMouseup; = setPos;vaildLength = - - 2;scaleLenth = ;

//手动生成刻度线forvar i=0;iscaleNumber - 1;i++u00a0objScaleDiv = "div style='position:absolute;left:50;top:13;font-size:4pt;font-weight:lighter;color:#;width:3:'/";u00a0objScaleDiv = ;u00a0 = scaleLenth*i + 1;innerText = "|";

function createTrack //创建滑动条var objBarContainsDiv;objBarContainsDiv = "div style='position:absolute;left:0;top:0;height:16;width:11;z-index:2;'/";

//创建矩形区域var objBarTop = "div style='position:absolute;left:0;top:0;height:10;width:11;font-size:1px;border-top:solid 1px #;border-right:solid 1px #;border-left:solid 1px #cccccc;z-index:2;background:#cccccc;'";objBarTop = ;var objPointDiv;var iScale = 0;forvar i=0;i6;i++ //创建红色标识区域，用来指向刻度u00a0objPointDiv = "div style='position:absolute;background:red;font-size:1px;z-index:2;border-right:solid 1px #;'";u00a0iScale = i + 1;u00a0 = iScale; = + iScale - 1; - 2*iScale0u00a0break; = - 2*iScale;u00a0u00a0objPointDiv = ;

return objBarContainsDiv;

function setPos //单击滑动条时，设置滑动条位置

trackBeforeMove; = *100/vaildLength + "%";//显示刻度数

function trackBarBeforeMove//移动滑动条前的准备vLeft = .x - ; = "#dddddd";//背景; //鼠标"onmousemove"， trackBeforeMove; //动态添加移动事件

function trackBeforeMove//滑块移动中

var leftPoint;var pointDividLength;var vMousePositionX;ifevent.x - - 8 vaildLength || return;vMousePositionX = parseIntevent.x - ;leftPoint = ;//左边最近的点序号pointDividLength = leftPoint*scaleLenth + scaleLenth/2; = "leftPoint:" + leftPoint + " vMousePositionX:" + vMousePositionX + " pointDividLength:" + pointDividLength + "";ifvMousePositionX pointDividLength //粘连到左边点u00a0 = leftPoint*scaleLenth;ifvMousePositionX pointDividLength //粘连到右边点u00a0 = leftPoint+1*scaleLenth;

移到了右边界 = vaildLength;

//移到了左边界 = 0;

= *100/vaildLength + "%";

function trackBeforeMouseup //滑动结束，解除绑定"%"，"" = vaildLength; = "100%";//不能超出最大刻度100else "%"，"" = 0; = "0%";//不能小于最大刻度"onmousemove"， trackBeforeMove;//撤销事件绑定 = "#cccccc"; //改变背景色; //释放鼠标

/scriptu00a0/HEADu00a0BODY onload="contentLoad"div id="trackDiv" style="position:absolute;left:100;top:50;border:solid 0px #cccccc;width:700;height:23;background:#dddddd;"u00a0hr id="trackDegree" size="1" color="#cccccc" style="position:absolute;top:16;height:3;border:groove 1px #eeeeee;background:#;z-index:1;"/divspan id="trackLevel" style="position:absolute;left:100;top:30;width:50;font-size:9pt;color:red;"0%/spanu00a0/BODY/HTML

运行效果

难点剖析

本例的重点在于所有的刻度、滑动条、滑动条标识都是动态创建的。在“createTrack”方法中，“objBarTop”属性是创建的滑动条标识的上部分，“objPoimDiv”是创建在滑动条下部的红色指标，通过其可以轻松地看到滑动条的当前刻度。

源码下载