您的位置：首页 > Web前端 > JavaScript

（JavaScript）调色板

2015-09-02 22:07 453 查看

<!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.onmousedown=function(evt){

var objEvt=evt || event;

var posX=objEvt.clientX-obj.offsetLeft;

var posY=objEvt.clientY-obj.offsetTop;

document.onmousemove=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.onmouseup=function(){

document.onmousemove=null;

document.onmouseup=null;

}

}

}

window.onload=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航