En el proceso de aprendizaje a la práctica, creo que tiene que tener los siguientes pasos:
En primer lugar, tener un objetivo claro, para analizar el proceso de aplicación tiene su propio nivel de conocimiento que hay problemas que puedan surgir, y luego una lista del orden que hay que resolver el problema, encontrar la solución de acuerdo con el problema, los problemas se resuelven pueden estar ligeramente fuera de una versión de prueba, por supuesto, finalmente capaz de hacer el trabajo para optimizar el código, incluso la optimización del rendimiento.
Aquí está lo que escribí botones de la paleta con todo javaScript proceso:
En primer lugar necesidad que hay que hacer es un botón de la paleta: cuatro botones de color RGBA uno en nombre de los cuatro parámetros.
Temas de reflexión es: 1, arrastre los eventos de ratón DOM elemento 2, la forma de controlar elemento DOM a ese nivel pueden arrastrar sólo 3, cómo convertir y arrastrar elementos para cambiar los valores de color y transparencia
La resolución de problemas final:
1, la necesidad de utilizar el ratón para arrastrar y soltar elemento dom onMouseDown, onmousemove, onmouseup eventos de ratón (Por cierto: la diferencia entre onMouseDown y mouseDown onMouseDown es js es nativo, y el paquete es una mousedown método jQuery onMouseDown método)
2 , de manera que el niño puede mover el elemento de control está fijado en el elemento de subelementos padre solamente en el movimiento horizontal
3, el peso se puede convertir en los correspondientes valores de color y valores de transparencia de preferencia arrastrando toda la barra de progreso (ver los comentarios detalles del código)
Una aguja de las horas noquear códigos y representaciones
códigos:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-family:"微软雅黑";}
#parent1,#parent2,#parent3,#parent4{ position:relative; width:520px; height:50px; background:#ccc; margin-bottom:20px; }
#div1,#div2,#div3,#div4{ position:absolute; width:20px; height:50px; background:#99e;}
#div5{position:absolute; width:300px; height:300px;background:#000;}
label{margin-left: 525px;}
</style>
</head>
<body>
<div id="parent1">
<div id="div1"></div>
<label id="div1_info">R:0</label>
</div>
<div id="parent2">
<div id="div2"></div>
<label id="div2_info">G:0</label>
</div>
<div id="parent3">
<div id="div3"></div>
<label id="div3_info">B:0</label>
</div>
<div id="parent4">
<div id="div4"></div>
<label id="div4_info">opacity:1(default)</label>
</div>
<div id="div5"></div>
<script>
window.onload=function(ev){
var oEvent = ev||event; //兼容ie火狐事件对象
var oDiv1 = document.getElementById("div1");
var oParent1 = document.getElementById("parent1");
var oDiv2 = document.getElementById("div2");
var oParent2 = document.getElementById("parent2");
var oDiv3 = document.getElementById("div3");
var oParent3 = document.getElementById("parent3");
var oDiv4 = document.getElementById("div4");
var oParent4 = document.getElementById("parent4");
var oDiv5 = document.getElementById("div5");
//rgb对应的三个值
var R = G = B = 0;
//初始化鼠标点击位置,鼠标移动多少对应dom元素就对应移动多少
var disX=0;
var disY=0;
oDiv1.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv1.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv1.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent1.offsetWidth-oDiv1.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent1.offsetWidth-oDiv1.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent1.offsetHeight-oDiv1.offsetHeight){
t=oParent1.offsetHeight-oDiv1.offsetHeight;
}
//css对div定位
oDiv1.style.left=l+'px';
oDiv1.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv1.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
R = parseInt(percent*255);
//alert(R);
oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div1_info").innerHTML="R:"+R;
}
return false; //解决低版本火狐拖拽空div时的bug
}
oDiv2.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv2.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv2.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent2.offsetWidth-oDiv2.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent2.offsetWidth-oDiv2.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent2.offsetHeight-oDiv2.offsetHeight){
t=oParent2.offsetHeight-oDiv2.offsetHeight;
}
//css对div定位
oDiv2.style.left=l+'px';
oDiv2.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv2.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
G = parseInt(percent*255);
//alert(G);
oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div2_info").innerHTML="G:"+G;
}
return false; //解决低版本火狐拖拽空div时的bug
}
oDiv3.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv3.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv3.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent3.offsetWidth-oDiv3.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent3.offsetWidth-oDiv3.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent3.offsetHeight-oDiv3.offsetHeight){
t=oParent3.offsetHeight-oDiv3.offsetHeight;
}
//css对div定位
oDiv3.style.left=l+'px';
oDiv3.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv3.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
B = parseInt(percent*255);
//alert(B);
oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div3_info").innerHTML="B:"+B;
}
return false; //解决低版本火狐拖拽空div时的bug
}
oDiv4.onmousedown=function(ev){
var oEvent=ev||event;
//获取鼠标相对于被移动元素的父元素的位置
disX=oEvent.clientX-oDiv4.offsetLeft; //获取鼠标点击位置,clientX鼠标相对于可视区域左上角的x坐标
disY=oEvent.clientY-oDiv4.offsetTop; //clientY鼠标相对于可视区域左上角的Y坐标
document.onmousemove=function(ev){
var oEvent=ev||event;
//定位div位置
var l=oEvent.clientX-disX; //oEvent.clientX是div在x方向上被移动的距离
var t=oEvent.clientY-disY;
//控制div不超出可视窗口范围
if(l<0){//
l=0;
}
else if(l>oParent4.offsetWidth-oDiv4.offsetWidth){//如果向右移动的距离比父子元素宽度差还大表示向右越界了
l=oParent4.offsetWidth-oDiv4.offsetWidth;
}
if(t<0){
t=0;
}
else if(t>oParent4.offsetHeight-oDiv4.offsetHeight){
t=oParent4.offsetHeight-oDiv4.offsetHeight;
}
//css对div定位
oDiv4.style.left=l+'px';
oDiv4.style.top=t+'px';
}
document.onmouseup=function(){
//鼠标弹起时释放onmousemove和onmouseup事件
document.onmousemove=null;
document.onmouseup=null;
len = oDiv4.offsetLeft;//获取相对父元素移动的距离
percent = len/500;
oDiv5.style.opacity = percent;
//oDiv5.style.background = "rgb("+R+","+G+","+B+")";
document.getElementById("div4_info").innerHTML="A:"+percent;
}
return false; //解决低版本火狐拖拽空div时的bug
}
}
</script>
</body>
</html>
A continuación se presentan representaciones:
R & lt / G / B / A RGBA representan los cuatro parámetros, donde el valor predeterminado de la transparencia de una se completa función principal
La parte inferior es el efecto de la visualización de la div
Originalmente destinado a ser puesto en escrito en detalle los pasos, pero creo que esto no es difícil, y requiere mucho tiempo, por lo que desgraciadamente. js código puede volver a utilizar una gran parte, ni la optimización. Siendo esta la primera, hay tiempo para enmendar
Este artículo se reproduce en: mono 2048➥ https://www.mk2048.com/blog/blog.php?id=hh0k1h011ab