jsslider滑动条怎么写

综合知识
关注：1.58W次

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>

#BigRoll{width:500px;height:25px;border:1px solid Blue;}

#SmallRoll{Width:20px;Height:25px;Border:1px solid black;Cursor:Hand;}

</style>

var $=function(id)

{

return document.getElementById(id);

}

</script>

</head>

<body>

</div>

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='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='width:11;'/)；//创建矩形区域var objBarTop = this。 document。

createElement(div style='width:11;');objBarTop = objBarContainsDiv。 appendChild(objBarTop);var objPointDiv;var iScale = 0;for(var i=0;i6;i++){ //创建红色标识区域，用来指向刻度objPointDiv = this。

document。createElement(div);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使用中的重要两种方法编辑

按照展示方式，滑动条可以分为两种：

一种是为水平滑动条（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怎么设置滚动条的样式

8.js如何写自己的滚动条

由于网页中使用到了iframe，如果iframe中的内容超过主页面的范围后，在iframe的四周会出现滚动条，这样和主页面很不协调，所以在网上找了很久，终于找到一段代码可以解决这个问题，代码如下：这段代码放在之间：下边是在iframe中输入的代码：代码的关键是：设置id 调用js中的函数（dyniframesizeHeight(id)是设置高的滚动条自动调整，dyniframesizeWidth(id)是设置宽的滚动条的自动调整。）

将scrolling=no 其他就看实际应用做相应的修改了；。

标签： jsslider

文章版权属于文章作者所有，转载请注明 https://dongkepu.com/zonghezhishi/ny49nr.html

当前位置：懂科普 >

综合知识

jsslider滑动条怎么写

相关内容

热门文章

猜你喜欢