Phiên bản đầy đủ: jsB@nk » Màu nền » Đổi màu background
URL: https://www.javascriptbank.com/background-color-slider.html
Đoạn code cung cấp cho người lướt web chức năng thay đổi màu nền của trang web đăng duyệt thông qua ba thanh trượt Red-Green-Blue có thể thay đổi thông số màu sắc. Nên sử dụng kết hợp cả ba thanh trượt để chọn được màu như ý.
Phiên bản đầy đủ: jsB@nk » Màu nền » Đổi màu background
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-->