調整滑塊改變網(wǎng)頁背景顏色的JS代碼

2024-09-05 12:21:46

字體：大中小

來源：轉載

供稿：網(wǎng)友

這是一個顏色滑塊調節(jié)器，本示例只是改變了一下網(wǎng)頁的背景顏色，但是你稍微改動一下，它就可以控制你網(wǎng)頁中的其它元素，比如層內的某個顏色的背景、導航欄背景等，這些完全由你自己決定。

<html><title>網(wǎng)頁背景調整滑塊</title><head><STYLE type=text/css>BODY {	MARGIN: 25px 25px 25px}#all TD {	FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana";}INPUT,SELECT ,P{	FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana";}#all A:hover {	COLOR: #0066CC;}</STYLE><SCRIPT language=JavaScript></SCRIPT><style>.drag {CURSOR: hand; POSITION: relative}</style></HEAD><BODY id=all bgColor=#336699>      <table width="100%" border="0" cellpadding="10" height="130">        <tr>           <td height="20">           </td>        </tr>        <tr>           <td bgcolor="#f8f8f8" height="71">             <p><script language=JavaScript1.2>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";var 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 (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];}var dragMe=false, kObj, yPos,directionfunction moveLayer() {if (event.button==1 && dragMe) {	oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; 	if (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";}	sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; 	chgBg(); 	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>             友情提示：<br>這是一個顏色滑塊調節(jié)器，當然在本例中只是改變了一下背景顏色，但是它同樣適應于網(wǎng)頁中的其它元素，比如每個層內的某個顏色的背景、導航條背景等，這由你自己去擴展，發(fā)揮你的才能吧……<script language="JavaScript">document.write("document.title");</script><input type=radio value=false name=perCent>              Prozent                <input type=radio CHECKED value=true  name=perCent>               255</p>             <div   class="70qarhlowxag"   id=outerLyr  style="Z-INDEX: 1; LEFT: 233px; 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">                <div   class="70qarhlowxag"   id=innerLyr  style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777">                  <div   class="70qarhlowxag"   id=barLyr  style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div>               </div>             </div>             <div   class="70qarhlowxag"   id=outerLyr1  style="Z-INDEX: 1; LEFT: 268px; 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">                 <div   class="70qarhlowxag"   id=innerLyr1  style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777">                  <div   class="70qarhlowxag"   id=barLyr1  style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div>               </div>             </div>             <div   class="70qarhlowxag"   id=outerLyr2  style="Z-INDEX: 1; LEFT: 300px; 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">                  <div   class="70qarhlowxag"   id=innerLyr2  style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777">                  <div   class="70qarhlowxag"   id=barLyr2  style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div>               </div>             </div>           </td>         </tr>       </table> </head></html>

上一篇：穿越星空的網(wǎng)頁背景特效

下一篇：JS隨機背景代碼