Version complète: jsB@nk » Arrière-plan » Bar Slider
URL: https://www.javascriptbank.com/background-color-slider.html
Utilisez ce script de drag and drop à changeany actions telles que le changement de couleur d'arrière-plan ou la police, la couleur ou le son volume ou d'images ou d'un jeu de vitesse ou que vous voulez. Un moyen facile de faire vos scripts plus facile d'utilisation.
Version complète: jsB@nk » Arrière-plan » Bar Slider
URL: https://www.javascriptbank.com/background-color-slider.html
<STYLE>.drag {CURSOR: hand; POSITION: relative}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript1.2>/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/var sPosition;var showPerc=100;document.onmousedown=dragLayerdocument.onmouseup=new Function("dragMe=false")var Color= new Array();Color[0] = "00";Color[1] = "11";Color[2] = "22";Color[3] = "33";Color[4] = "44";Color[5] = "55";Color[6] = "66";Color[7] = "77";Color[8] = "88";Color[9] = "99";Color[10] = "AA";Color[11] = "BB";Color[12] = "CC";Color[13] = "DD";Color[14] = "EE";Color[15] = "FF";// Demofunction to change bg-color by moving slidervar rVal,gVal,bVal, cColfunction chgBg() {cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;// If more sliders are used, each of them has to be handled separatelyif (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal;if (kObj.id =="knobImg1") document.bgColor="#"+rVal+Color[ind]+bVal;if (kObj.id =="knobImg2") document.bgColor="#"+rVal+gVal+Color[ind];}// Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicatedvar dragMe=false, kObj, yPos,directionfunction moveLayer() {if (event.button==1 && dragMe) {oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; // Limit movement of knob to stay inside layerif (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}// Set working variable 'showPerc' depending on 100 or 250 scalingsPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; // The following line should be replaced by the function-call with the actual task to performchgBg(); return false; }}function dragLayer() {if (!document.all) return;if (event.srcElement.className=="drag"){dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><!-- This would be a way to configure if slider range is 0-100 or 0-255 --><DIV id=outerLyr style="Z-INDEX: 1; LEFT: 155px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class=drag id=knobImg style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px" src="../image/logojs.gif"> <DIV id=innerLyr style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777"><DIV id=barLyr style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV></DIV></DIV><DIV id=outerLyr1 style="Z-INDEX: 1; LEFT: 185px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class=drag id=knobImg1 style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px" src="../image/logojs.gif"> <DIV id=innerLyr1 style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777"><DIV id=barLyr1 style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV></DIV></DIV><DIV id=outerLyr2 style="Z-INDEX: 1; LEFT: 215px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"><IMG class=drag id=knobImg2 style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px" src="../image/logojs.gif"> <DIV id=innerLyr2 style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777"><DIV id=barLyr2 style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></DIV></DIV></DIV><INPUT type=radio value=false name=perCent>Prozent <INPUT type=radio CHECKED value=true name=perCent>255 </td></tr></table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->