📄 带滑竿的调色器.txt

📁 JavaScript特效（新）这里有许多的JAVA特效.供学者参考
💻 TXT
字号:
先将下列代码复制到<head></head>之间：
<script>
var R=0
var G=0
var B=0
function toHex(N){
	N=Math.max(0,N)
	N=Math.min(255,N)
	return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16)
}
function set(){
	R=R_slider.style.pixelLeft
	G=G_slider.style.pixelLeft
	B=B_slider.style.pixelLeft
	R=Math.max(0,R)
	R=Math.min(255,R)
	G=Math.max(0,G)
	G=Math.min(255,G)
	B=Math.max(0,B)
	B=Math.min(255,B)
	var color="#"+toHex(R)+toHex(G)+toHex(B)
	hex_color.value=color
	cur.style.backgroundColor=color
	rUp.style.backgroundColor="#"+toHex(R)+"00"+"00"
	
	gUp.style.backgroundColor="#"+"00"+toHex(G)+"00"
	
	bUp.style.backgroundColor="#"+"00"+"00"+toHex(B)
}

function setColor(v){
	var x=event.clientX-5
	if(x>255) x=255
	if(x<0) x=0
	eval(v+"_slider").style.pixelLeft=x
	eval(v+"_value").innerHTML=x
	set()
	
}
</script>
<script>
var off,curD,dragging
function start_drag(){
	off=event.clientX-curD.style.pixelLeft
}

function drag(){
	if(dragging){
		x=event.clientX-off
		if(curD.style.pixelLeft>=0 && curD.style.pixelLeft<=255){
			curD.style.pixelLeft=x
			eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
			set()
		}
		if(curD.style.pixelLeft>255){
			
			curD.style.pixelLeft=255;
			//alert("Sorry, but you can not have RGB values that are over 255!")
			eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
		}
		if(curD.style.pixelLeft<0){
			
			curD.style.pixelLeft=0
			//alert("Sorry, but you can not have RGB values that are under 255!")
			eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
		}
	}
	return false
}
document.onmousemove=drag
document.onmouseup=new Function("dragging=false;")
</script>
<style>    .slider_bar {
	background : menu;
     font-size : 0;
     z-index : 0;
     top : auto;
     left : 0;
	 width : 9;
	 height : 20;
	 border : thin outset;
     position : absolute;
     cursor : NW-resize;
     }
     .slider {
     top : auto;
     left : 0;
     position : absolute;
     background: White;
     font-size : 10;
     height : 20;
     z-index : 0;
     width : 265;
     border : thin inset;
     text-align : center;
     }
     
     .small_box {
     top : auto;
     left : 270;
     position : absolute;
     font-size : 0;
     height : 20;
     z-index : 0;
     width : 20;
     border : thin inset;
     text-align : center;
     }
     
     .large_box {
     font-size : 0;
     height : 40;
     z-index : 0;
     width : 40;
     border : thin inset;
     text-align : center;
     }
     
     .button {
	 background : Menu;
     top : auto;
     left : auto;
     position : absolute;
     font-size : 12;
     height : 20;
     z-index : 0;
     width : 120;
     border : thin outset;
     text-align : center;
	 cursor : NW-resize;
     }
     .preset {
     top : auto;
     left : 270;
     position : absolute;
     font-size : 0;
     height : 15;
     z-index : 0;
     width : 15;
     border : thin inset;
     text-align : center;
     }
    .slider_box{
    	top: auto;
    	left : auto;
    	position : absolute;
    }</style>



再将下列代码复制到<body></body>之间：

<BODY  onload="cur=test; set()">
<div align="center"><h1><font size="5"><font color="#FFFF00">十六进制</font><font color="#FF0000">R</font><font color="#008000">G</font><font color="#0000FF">B</font><font color="#FFFF00">色码转换器</font></font></h1></div>  
  
  
<span id="test" class="large_box"></span><br>  
<span id="R_value" class="slider" align="left" onclick="setColor('R')">R</span>  
<span id="R_slider" class="slider_bar" value="R" onmouseDown="curD=this; dragging=true; start_drag(); this.style.background='white'" onMouseUp="this.style.background='menu'"></span>  
<span id="rUp" class="small_box"></span>  
  
<br>  
  
  
<span id="G_value" class="slider" align="left" onclick="setColor('G')">G</span>  
<span id="G_slider" class="slider_bar" value="G" onmouseDown="curD=this; dragging=true; start_drag(); this.style.background='white'" onMouseUp="this.style.background='menu'"></span>  
<span id="gUp" class="small_box"></span>  
  
<br>  
  
  
<span id="B_value" class="slider" align="left" onclick="setColor('B')">B</span>  
<span id="B_slider" class="slider_bar" value="B" onmouseDown="curD=this; dragging=true; start_drag(); this.style.background='white'" onMouseUp="this.style.background='menu'"></span>  
<span id="bUp" class="small_box"></span>  
<br>  
<input size=7 maxlength="7" name="hex_color">  
<span class="button" onClick="setFromHex()" onmouseDown="this.style.borderStyle='inset'" onmouseUp="this.style.borderStyle='outset'">转换</span><br>    
<script>   
function setFromHex(){   
	var h=hex_color.value   
	if(h.charAt(0)=="#"){h=h.substring(1,h.length)}   
	h=h.split("")   
	   
	var no="ghijklmnopqrstuvwxyz"   
	for(var i=0;i<no.length;i++){   
		if(no.indexOf(h[i])!=-1){h[i]="F"}   
	}   
	h=h.join("")   
	R=toDec(h.substring(0,2))   
	G=toDec(h.substring(2,4))   
	B=toDec(h.substring(4,6))   
	R_slider.style.pixelLeft=R   
	G_slider.style.pixelLeft=G   
	B_slider.style.pixelLeft=B   
	R_value.innerHTML=R   
	G_value.innerHTML=G   
	B_value.innerHTML=B   
	set()   
}   
function toDec(h){   
	return parseInt(h,16)   
}   
</script>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -