育才学习网1.如何用JS设计滑动条效果
【实例代码】htmlheadmeta ; charset=gb2312title滑块条/titlestyle 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/headbodydiv id=info/divdiv id=trackBar1 /divscript type=text/javascript language=javascript//对象未创建完成之前，不能在函数之中用thisfunction setTrackBar(trackBar, min, max, barPos)//指定的div，最小值，最大值和位置{this。
trackBar = trackBar； //承载滑动条的对象this。sliderIdStr = trackBar + _slider； //滑动条this。
trackBarId = document。getElementById(this。
trackBar)；//获取divthis。sliderId = null； //未创建滑动条对象this。
min = (min=0)?min:0；//最小值不能小于0this。max = (max=min)?max:min；//最大值必须大于最小值this。
barPos = (barPos=min barPos=max)?barPos:min；//位置必须在最大和最小之间this。orientation = h； //设置对象和滑动条的位置this。
trackBarWidth = 100;this。 trackBarHeight = 10this。
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)//创建滑动条的方法{this。
trackBarId。 innerHTML = div id=\ + this。
sliderIdStr + \ + onm ousedown=\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； //设置滑动条的初始位置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（) //实现拖拽的方法{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（)//结束拖拽{if (!curTrackBar){return;}document。body。
style。cursor = default;curTrackBar。
draging = false;}function OnTrackBarTxt（) //拖拽时，改变滑动条的值{document。getElementById(info)。
innerHTML = curTrackBar。barPos+ / + curTrackBar。
max;}document。onmousemove = OnDrag；//鼠标移动时，实现拖拽-开始滑动document。
onmouseup = EndDrag； //鼠标离开时，结束拖拽-即结束滑动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)；//创建滑动条/script/body/html 【难点剖析】本例提供了关于滑动条的5个常用方法。“setTrackBar”方法用来设置滚动条的最小值、最大值和位置等。
“Create”方法用来创建滑动条的承载器和滑动条本身。“BeforeDrag”方法主要判断用户的操作是否为“拖曳”。
“OnDrag”方法表示拖曳过程中滑动条的改变。“EndDrag''方法用来实现拖曳完成后的一些状态恢复。
这些方法可以直接移植到其他项目中使用。
2.如何在Javascript中做出一个滑动条的效果
<html>
<head>
<style type="text/css">
#BigRoll{width:500px;height:25px;border:1px solid Blue;}
#SmallRoll{Width:20px;Height:25px;Border:1px solid black;Cursor:Hand;}
</style>
<script type="text/javascript">
var $=function(id)
{
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="BigRoll">
<div id="SmallRoll">
</div>
</div>
<script type="text/javascript">
var x=0;
var ismove=false;
$("SmallRoll").onclick=function()
{
x=event.x;
ismove=!ismove;
}
$("SmallRoll").onmousemove=function()
{
var y=event.x-x + $("SmallRoll").offsetLeft-20;
x=y;
var z=480;
if(y<0)
{y=0;}
if(y>z)
{y=z;}
if(ismove)
{
$("SmallRoll").style.marginLeft=y;
}
}
</script>
</body>
</html>
单击开始 单击结束
3.JS设计滑动条效果的代码怎么写呢
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4。
0 Transitional//ENHTMLHEADTITLE滑动条-学无忧（）/titleMETA NAME=Generator CONTENT=EditPlusMETA NAME=Author CONTENT=META NAME=Keywords CONTENT=META NAME=Description CONTENT=script language=javascriptvar 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;iscaleNumber - 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（){ //创建滑动条var objBarContainsDiv;objBarContainsDiv = this。 document。
createElement(div style='position:absolute;left:0;top:0;height:16;width:11;z-index:2；'/)；//创建矩形区域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;i6;i++){ //创建红色标识区域，用来指向刻度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（){ //单击滑动条时，设置滑动条位置trackBeforeMove();trackLevel。
innerText = Math。round(parseInt(objTrackBar。
style。left)*100/vaildLength） + %；//显示刻度数}function trackBarBeforeMove（){//移动滑动条前的准备vLeft = window。
event。x - objTrackBar。
style。pixelLeft;objTrackBar。
style。background = #dddddd；//背景objTrackBar。
setCapture（)； //鼠标objTrackBar。 attachEvent(onmousemove, trackBeforeMove)； //动态添加移动事件}function trackBeforeMove（){//滑块移动中var leftPoint;var pointDividLength;var vMousePositionX;if((event。
x - objContainsDiv。offsetLeft - 8) vaildLength || event。
xobjContainsDiv。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（){ //滑动结束，解除绑定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/HEADBODY onl oad=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 。
4.slider.css一般写啥
内容概述编辑
slider控件是有滑块与滑动条组成。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0-100。
按照展示方式，滑动条可以分为两种：
一种是为水平滑动条（HorizontalSlider）
另一种是垂直滑动条（Verticalslider），它们之间的用法完全相同。
开发中我们常使用滑动条来调节声音或者颜色等。
2使用中的重要两种方法编辑
slider控件是有滑块与滑动条组成。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0-100。
按照展示方式，滑动条可以分为两种：
一种是为水平滑动条（HorizontalSlider）
另一种是垂直滑动条（Verticalslider），它们之间的用法完全相同。
开发中我们常使用滑动条来调节声音或者颜色等。
5.slider.css一般写啥
内容概述编辑slider控件是有滑块与滑动条组成。
使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0-100。
按照展示方式，滑动条可以分为两种：一种是为水平滑动条（HorizontalSlider）另一种是垂直滑动条（Verticalslider），它们之间的用法完全相同。开发中我们常使用滑动条来调节声音或者颜色等。
2使用中的重要两种方法编辑slider控件是有滑块与滑动条组成。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。
如果滑动条的整体长度为100，则滑动的范围就是0-100。按照展示方式，滑动条可以分为两种：一种是为水平滑动条（HorizontalSlider）另一种是垂直滑动条（Verticalslider），它们之间的用法完全相同。
开发中我们常使用滑动条来调节声音或者颜色等。
6.求java jslider的例子,如何实现下图右边的滑动条
jSlider.setUI(new MetalSliderUI() {
@Override
public void paintThumb(Graphics g) {
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(Color.red);
//
g2d.fillRect(thumbRect.x, thumbRect.y, thumbRect.width,
//
thumbRect.height);
g2d.drawImage(img, x, y, width, height, observer);
}
});
同样道理可以改改滑动条的填充颜色，不过有些复杂。你可以参考javax.swing.plaf.basic.BasicSliderUI、javax.swing.plaf.metal.MetalSliderUI等类中的paintTrack方法来实现怎么自定义自己的滑动条哈。
7.js怎么设置滚动条的样式
<style type=text/css> #scrollerContent {POSITION: absolute} body {font-size:9pt;color:#660000;text-decoration: none} </style> <script> var upH = 13；//向上的箭头的高度 var upW = 9； //向上的箭头的宽度 var downH = 13；//向下的箭头的高度 var downW = 9；//向下的箭头的宽度 var dragH = 26； //滚动条的高度 var dragW = 9； //滚动条的宽度 var scrollH =68； //滚动体的高度 var speed =9； //滚动的速度 var dom = document.getElementById ? true:false; var nn4 = document.layers ? true:false; var ie4 = document.all ? true:false; var mouseY; var mouseX; var clickUp = false; var clickDown = false; var clickDrag = false; var clickAbove = false; var clickBelow = false; var timer = setTimeout("",500); var upL,upT,downL,downT,dragL,dragT,rulerL,rulerT; var contentT,contentH; var contentClipH,scrollLength; var startY; function down(e){ if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true;getMouse(e); startY = (mouseY - dragT); if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){ clickUp = true; return scrollUp()} else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){ clickDown = true; return scrollDown()} else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){ clickDrag = true; return false} else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){ if(mouseY < dragT){clickAbove = true;clickUp = true;return scrollUp()} else{clickBelow = true;clickDown = true; return scrollDown()}} else{return true}} function move(e){ if(clickDrag && contentH > contentClipH){ getMouse(e); dragT = (mouseY - startY); if(dragT < (rulerT)) dragT = rulerT; if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = ((dragT - rulerT)*(1/scrollLength)); contentT = eval('-' + contentT); moveTo(); if(ie4) return false}} function up(){ clearTimeout(timer); clickUp = false; clickDown = false; clickDrag = false; clickAbove = false; clickBelow = false; return true; } function getT(){ if(ie4) contentT = document.all.scrollerContent.style.pixelTop; else if(nn4) contentT = document.scrollerContentClip.document.scrollerContent.top; else if(dom) contentT = parseInt(document.getElementById("scrollerContent").style.top); } function getMouse(e){ if(ie4){ mouseY = event.clientY + document.body.scrollTop; mouseX = event.clientX + document.body.scrollLeft; } else if(nn4 || dom){ mouseY = e.pageY; mouseX = e.pageX; } } function moveTo(){ if(ie4){ document.all.scrollerContent.style.top = contentT; document.all.ruler.style.top = dragT; document.all.drag.style.top = dragT; } else if(nn4){ document.scrollerContentClip.document.scrollerContent.top = contentT; document.ruler.top = dragT; document.drag.top = dragT; } else if(dom){ document.getElementById("scrollerContent").style.top = contentT + "px"; document.getElementById("drag").style.top = dragT + "px"; document.getElementById("ruler").style.top = dragT + "px"; } } function scrollUp(){ getT(); if(clickAbove){ if(dragT <= (mouseY-(dragH/2))) return up(); } if(clickUp){ if(contentT < 0){ dragT = dragT - (speed*scrollLength); if(dragT < (rulerT)) dragT = rulerT; contentT = contentT + speed; if(contentT > 0) contentT = 0; moveTo(); timer = setTimeout("scrollUp()",25)}} return false;} function scrollDown(){ getT(); if(clickBelow){ if(dragT >= (mouseY-(dragH/2))) return up()} if(clickDown){ if(contentT > -(contentH - contentClipH)){ dragT = dragT + (speed*scrollLength); if(dragT > (rulerT + scrollH - dragH)) dragT = (rulerT + scrollH - dragH); contentT = contentT - speed; if(contentT < -(contentH - contentClipH)) contentT = -(contentH - contentClipH); moveTo(); timer = setTimeout("scrollDown()",25)}} return false} function reloadPage(){ location.reload()} function eventLoader(){ if(ie4){ upL = document.all.up.style.pixelLeft; upT = document.all.up.style.pixelTop; downL = document.all.down.style.pixelLeft; downT = document.all.down.style.pixelTop; dragL = document.all.drag.style.pixelLeft; dragT = document.all.drag.style.pixelTop; rulerT = document.all.ruler.style.pixelTop; contentH = parseInt(document.all.scrollerContent.scrollHeight); contentClipH = parseInt(document.all.scrollerContentClip.style.height); } else if(nn4){ upL = document.up.left; upT = document.up.top; downL = document.down.left; downT = document.down.top; dragL = document.drag.left; dragT = document.drag.top; rulerT = document.ruler.top; contentH = document.scrollerContentClip.document.scrollerContent.clip.bottom; contentClipH = 。
8.js如何写自己的滚动条
由于网页中使用到了iframe，如果iframe中的内容超过主页面的范围后，在iframe的四周会出现滚动条，这样和主页面很不协调，所以在网上找了很久，终于找到一段代码可以解决这个问题，代码如下：这段代码放在
之间：下边是在iframe中输入的代码：代码的关键是：设置id 调用js中的函数（dyniframesizeHeight(id)是设置高的滚动条自动调整，dyniframesizeWidth(id)是设置宽的滚动条的自动调整。）将scrolling=no 其他就看实际应用做相应的修改了；。
转载请注明出处育才学习网 » jsslider滑动条怎么写
