中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

HTML5技术制作绚丽颜色选择器 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > 网页设计 > Html+Css > HTML5技术制作绚丽颜色选择器

HTML5技术制作绚丽颜色选择器

2012-11-06    文章来源:互联网    浏览次数:

使用HTML5技术开发的超酷颜色选择器

在线演示   本地下载

现在的网页颜色选择器基本是js或者是jquery实现的,今天这里我们将使用HTML5技术来自己实现一个更棒的颜色选择器!

  1. <!-- preview element --> 
  2. <div class="preview"></div> 
  3.  
  4. <!-- colorpicker element --> 
  5. <div class="colorpicker" style="display:none"> 
  6.     <canvas id="picker" var="1" width="300" height="300"></canvas> 
  7.  
  8.     <div class="controls"> 
  9.         <div><label>R</label> <input type="text" id="rVal" /></div> 
  10.         <div><label>G</label> <input type="text" id="gVal" /></div> 
  11.         <div><label>B</label> <input type="text" id="bVal" /></div> 
  12.         <div><label>RGB</label> <input type="text" id="rgbVal" /></div> 
  13.         <div><label>HEX</label> <input type="text" id="hexVal" /></div> 
  14.     </div> 
  15. </div> 

代码很简单,包含了2个部分,一个点击元素,一个用来展示颜色选择器的元素。

  1. $(function(){  
  2.     var bCanPreview = true// can preview  
  3.  
  4.     // create canvas and context objects  
  5.     var canvas = document.getElementById('picker');  
  6.     var ctx = canvas.getContext('2d');  
  7.  
  8.     // drawing active image  
  9.     var image = new Image();  
  10.     image.onload = function () {  
  11.         ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas  
  12.     }  
  13.  
  14.     // select desired colorwheel  
  15.     var imagesrc="images/colorwheel1.png";  
  16.     switch ($(canvas).attr('var')) {  
  17.         case '2':  
  18.             imagesrc="images/colorwheel2.png";  
  19.             break;  
  20.         case '3':  
  21.             imagesrc="images/colorwheel3.png";  
  22.             break;  
  23.         case '4':  
  24.             imagesrc="images/colorwheel4.png";  
  25.             break;  
  26.         case '5':  
  27.             imagesrc="images/colorwheel5.png";  
  28.             break;  
  29.     }  
  30.     image.src = imageSrc;  
  31.  
  32.     $('#picker').mousemove(function(e) { // mouse move handler  
  33.         if (bCanPreview) {  
  34.             // get coordinates of current position  
  35.             var canvasOffset = $(canvas).offset();  
  36.             var canvasX = Math.floor(e.pageX - canvasOffset.left);  
  37.             var canvasY = Math.floor(e.pageY - canvasOffset.top);  
  38.  
  39.             // get current pixel  
  40.             var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);  
  41.             var pixel = imageData.data;  
  42.  
  43.             // update preview color  
  44.             var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";  
  45.             $('.preview').css('backgroundColor', pixelColor);  
  46.  
  47.             // update controls  
  48.             $('#rVal').val(pixel[0]);  
  49.             $('#gVal').val(pixel[1]);  
  50.             $('#bVal').val(pixel[2]);  
  51.             $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);  
  52.  
  53.             var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];  
  54.             $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));  
  55.         }  
  56.     });  
  57.     $('#picker').click(function(e) { // click event handler  
  58.         bCanPreview = !bCanPreview;  
  59.     });  
  60.     $('.preview').click(function(e) { // preview click  
  61.         $('.colorpicker').fadeToggle("slow""linear");  
  62.         bCanPreview = true;  
  63.     });  
  64. }); 

大家可以看到,这是一个非常短的js代码,用来创建新的画布和对象,然后我们画出一个圆形的颜色板。你可以选择不同颜色底板。 这里使用一个参数来设定不同的选择。如下:

  1. <canvas id="picker" var="1" width="300" height="300"></canvas> 
  2. <canvas id="picker" var="2" width="300" height="300"></canvas> 
  3. <canvas id="picker" var="3" width="300" height="300"></canvas> 
  4. <canvas id="picker" var="4" width="300" height="300"></canvas> 
  5. <canvas id="picker" var="5" width="300" height="300"></canvas> 

下面我们添加事件:mousemove,click事件。这里使用jQuery来实现选择器的展现和隐藏。

  1. $('.preview').click(function(e) { // preview click     $('.colorpicker').fadeToggle("slow", "linear");     bCanPreview = true; }); 

当我们的鼠标移动到选择对象上,我们需要刷新信息,例如,目前颜色

 

  1. $('#picker').mousemove(function(e) { // mouse move handler  
  2.     if (bCanPreview) {  
  3.         // get coordinates of current position  
  4.         var canvasOffset = $(canvas).offset();  
  5.         var canvasX = Math.floor(e.pageX - canvasOffset.left);  
  6.         var canvasY = Math.floor(e.pageY - canvasOffset.top);  
  7.  
  8.         // get current pixel  
  9.         var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);  
  10.         var pixel = imageData.data;  
  11.  
  12.         // update preview color  
  13.         var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";  
  14.         $('.preview').css('backgroundColor', pixelColor);  
  15.  
  16.         // update controls  
  17.         $('#rVal').val(pixel[0]);  
  18.         $('#gVal').val(pixel[1]);  
  19.         $('#bVal').val(pixel[2]);  
  20.         $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);  
  21.  
  22.         var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];  
  23.         $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));  
  24.     }  
  25. });  
  26. $('#picker').click(function(e) { // click event handler  
  27.     bCanPreview = !bCanPreview;  
  28. }); 

CSS代码

不同颜色底板的CSS:

  1. /* colorpicker styles */ 
  2. .colorpicker {  
  3.     background-color#222222;  
  4.     border-radius: 5px 5px 5px 5px;  
  5.     box-shadow: 2px 2px 2px #444444;  
  6.     color#FFFFFF;  
  7.     font-size12px;  
  8.     positionabsolute;  
  9.     width460px;  
  10. }  
  11. #picker {  
  12.     cursorcrosshair;  
  13.     floatleft;  
  14.     margin10px;  
  15.     border0;  
  16. }  
  17. .controls {  
  18.     floatright;  
  19.     margin10px;  
  20. }  
  21. .controls > div {  
  22.     border1px solid #2F2F2F;  
  23.     margin-bottom5px;  
  24.     overflowhidden;  
  25.     padding5px;  
  26. }  
  27. .controls label {  
  28.     floatleft;  
  29. }  
  30. .controls > div input {  
  31.     background-color#121212;  
  32.     border1px solid #2F2F2F;  
  33.     color#DDDDDD;  
  34.     floatright;  
  35.     font-size10px;  
  36.     height14px;  
  37.     margin-left6px;  
  38.     text-aligncenter;  
  39.     text-transformuppercase;  
  40.     width75px;  
  41. }  
  42. .preview {  
  43.     backgroundurl("../images/select.png"repeat scroll center center transparent;  
  44.     border-radius: 3px;  
  45.     box-shadow: 2px 2px 2px #444444;  
  46.     cursorpointer;  
  47.     height30px;  
  48.     width30px;  

效果如下,是不是很酷呢?

使用HTML5技术开发的颜色选择器

  • 上一篇:CSS3打造的10种创意动画菜单效果
  • 下一篇:没有了
  • 文章评论(查看全部)

    看不清楚?单击换一张。
    loading.. 评论加载中....
    关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部