JS组件开辟---调色按钮

2019年8月31日 162次阅读 来源: huanglw

在进修到实践的历程当中，我想应当须要有以下的步骤：
起首要有一个明白的目的，要剖析实行的历程当中以本身已有的学问程度有能够涌现的题目，然后列出顺次要处理的题目，再遵照题目找答案，把题目都处理就能够出个测试版咯，固然，末了有才能能够做代码上的优化以至机能优化方面的事情。
下面是我用javaScript写调色按钮的全部历程：

起首我须要做的是一个调色按钮：四个按钮顺次代表色彩rgba中的四个参数。
须要思索的题目是：1、鼠标事宜拖放dom元素 2、怎样掌握拖动的dom元素只能程度拖动 3、怎样把元素的拖动转换成色彩值和透明度的转变

题目终究处理：
1、鼠标拖放dom元素须要用到onmousedown、onmousemove、onmouseup的鼠标事宜（趁便提一下：onmousedown和mousedown的区别是onmousedown是js原生，而mousedown是封装了onmousedown要领的jQuery要领）
2、让子元素固定在父元素内挪动即可掌握子元素只在程度挪动
3、经由过程拖动的占全部进度条的权重能够转换成对应的色彩值以及透明度值（细致情况看代码解释）

手敲一小时出来的代码和结果图
代码：

<!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>

下面是结果图：
R/G/B/A离别代表rgba的四个参数，个中透明度的默认值时1
《JS组件开辟---调色按钮》
重要完成了功用

《JS组件开辟---调色按钮》
最下面的是结果显现的div

本来想细致步骤完整地写出来，不过我想这个也不难，又消耗时候，所以草草收场。js代码有很大一部分能够复用的，也没有做优化。临时先如许，有时候再修正

    原文作者：huanglw
    原文地址: https://segmentfault.com/a/1190000008062696
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞