（JavaScript）调色板

最新推荐文章于 2024-05-14 09:51:45 发布

阿和学IT

最新推荐文章于 2024-05-14 09:51:45 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/u010454986/article/details/48184367

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.colorPan{
width:200px;height:200px;background:rgb(0,0,0);
}
.red,.green,.blue{
width:300px;
height:15px;
border:#efefef 1px solid;
position:relative;
}
.redScroll{
width:10px;
height:15px;
background:red;
position:absolute;
}
.greenScroll{
width:10px;
height:15px;
background:green;
position:absolute;
}
.blueScroll{
width:10px;
height:15px;
background:blue;
position:absolute;
}
</style>
<script type="text/javascript">
function slide(obj){
obj.οnmοusedοwn=function(evt){
var objEvt=evt || event;
var posX=objEvt.clientX-obj.offsetLeft;
var posY=objEvt.clientY-obj.offsetTop;
document.οnmοusemοve=function(evt){
var objEvt=evt || event;
var iLeft=objEvt.clientX-posX;
var iTop=objEvt.clientY-posY;
if(iLeft>300-10){iLeft=300-10;}
if(iLeft<0){iLeft=0;}
obj.style.left=iLeft+"px";
var objColor=document.getElementById(obj.colorName);
var scale=255/290;
var value=Math.round(iLeft*scale);
objColor.innerHTML=value;
switch(obj.colorName){
case "red":
red=value;
break;
case "green":
green=value;
break;
case "blue":
blue=value;
break;
}
var objPan=document.getElementById("colorPan");
objPan.style.backgroundColor="rgb("+red+","+green+","+blue+")";
document.title="rgb("+red+","+green+","+blue+")";
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
}
window.οnlοad=function(){
red=0;
green=0;
blue=0;
var objRed=document.getElementById("redScroll");
objRed.colorName="red";
var objgreen=document.getElementById("greenScroll");
objgreen.colorName="green";
var objBlue=document.getElementById("blueScroll");
objBlue.colorName="blue";
slide(objRed);
slide(objgreen);
slide(objBlue);
}

</script>
</head>
<body>

<div class="colorPan" id="colorPan"></div>
红：<span id="red"></span>
<div class="red">
<div id="redScroll" class="redScroll"></div>
</div>
<br/>
绿：<span id="green"></span>
<div class="green">
<div id="greenScroll" class="greenScroll"></div>
</div>
<br/>
蓝：<span id="blue"></span>
<div class="blue">
<div id="blueScroll" class="blueScroll"></div>
</div>
</body>
</html>

阿和学IT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（JavaScript）调色板

网页标题.colorPan{width:200px;height:200px;background:rgb(0,0,0);}.red,.green,.blue{width:300px;height:15px;border:#efefef 1px solid;position:relative;}.redScroll{width:10px;
复制链接

扫一扫