调整滑块改变网页背景颜色的JS代码

2024-09-05 12:21:46

字体：大中小

来源：转载

供稿：网友

这是一个颜色滑块调节器，本示例只是改变了一下网页的背景颜色，但是你稍微改动一下，它就可以控制你网页中的其它元素，比如层内的某个颜色的背景、导航栏背景等，这些完全由你自己决定。

<html><title>网页背景调整滑块</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>这是一个颜色滑块调节器，当然在本例中只是改变了一下背景颜色，但是它同样适应于网页中的其它元素，比如每个层内的某个颜色的背景、导航条背景等，这由你自己去扩展，发挥你的才能吧……<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 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 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: 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 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: 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 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>           </td>         </tr>       </table> </head></html>

上一篇：穿越星空的网页背景特效

下一篇：JS随机背景代码