網站首頁學習教育 IT科技金融知識旅遊規劃生活小知識家鄉美食養生小知識健身運動美容百科遊戲知識綜合知識

jsslider滑動條怎麼寫

欄目: 綜合知識 / 發佈於: / 人氣:1.38W

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 其他就看實際應用做相應的修改了；。

Tags：jsslider