您現在的位置是:電腦技術吧?>? 基礎知識 ??>??技術開發有哪些,技術開發屬于什么部門??>??正文詳情

技術開發有哪些,技術開發屬于什么部門

常又松2019-11-13 23:51:11 人圍觀
簡介軟件開發屬于技術開發您可能已經看到許多使用jQuery/JS開發的顏色選擇器。今天,我們將使用HTML5技術來實現更好的顏色選擇器。希望你喜歡它復制代碼如下:!--preview元技術開發屬于什

可能大家見過很多使用jquery/js開發的顏色選擇器,今天這里我們將使用HTML5技術來自己實現一個更棒的顏色選擇器。

希望大家喜歡! 復制代碼代碼如下:!--preview element -- div class=preview/div !-- colorpicker element -- div class=colorpicker style=display:none canvas id=picker var=1 width=300 height=300/canvas div class=controls divlabelR/label input type=text id=rVal //div divlabelG/label input type=text id=gVal //div divlabelB/label input type=text id=bVal //div divlabelRGB/label input type=text id=rgbVal //div divlabelHEX/label input type=text id=hexVal //div /div /div 代碼很簡單,包含了2個部分,一個點擊元素,一個用來展示顏色選擇器的元素。

JavaScript代碼 復制代碼代碼如下:$(function(){ var bCanPreview = true; // can preview // create canvas and context objects var canvas = document.getElementById('picker'); var ctx = canvas.getContext('2d'); // drawing active image var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas } // select desired colorwheel var imagesrc=images/colorwheel1.png; switch ($(canvas).attr('var')) { case '2': imagesrc=images/colorwheel2.png; break; case '3': imagesrc=images/colorwheel3.png; break; case '4': imagesrc=images/colorwheel4.png; break; case '5': imagesrc=images/colorwheel5.png; break; } image.src = imageSrc; $('#picker').mousemove(function(e) { // mouse move handler if (bCanPreview) { // get coordinates of current position var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); // get current pixel var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; // update preview color var pixelColor = rgb( pixel[0] , pixel[1] , pixel[2] ); $('.preview').css('backgroundColor', pixelColor); // update controls $('#rVal').val(pixel[0]); $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); $('#rgbVal').val(pixel[0] ',' pixel[1] ',' pixel[2]); var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0]; $('#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6)); } }); $('#picker').click(function(e) { // click event handler bCanPreview = !bCanPreview; }); $('.preview').click(function(e) { // preview click $('.colorpicker').fadeToggle(slow, linear); bCanPreview = true; }); }); 大家可以看到,這是一個非常短的js代碼,用來創建新的畫布和對象,然后我們畫出一個圓形的顏色板。

你可以選擇不同的顏色底板。

這里使用一個參數來設定不同的選擇。

如下: 復制代碼代碼如下:canvas id=picker var=1 width=300 height=300/canvas canvas id=picker var=2 width=300 height=300/canvas canvas id=picker var=3 width=300 height=300/canvas pre class=html name=code /pre 下面我們添加事件:mousemove,click事件。

這里使用jQuery來實現選擇器的展現和隱藏。

復制代碼代碼如下:$('.preview').click(function(e) { // preview click $('.colorpicker').fadeToggle(slow, linear); bCanPreview = true; }); 當我們的鼠標移動到選擇對象上,我們需要刷新信息,例如,目前顏色 復制代碼代碼如下:$('#picker').mousemove(function(e) { // mouse move handler if (bCanPreview) { // get coordinates of current position var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); // get current pixel var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; // update preview color var pixelColor = rgb( pixel[0] , pixel[1] , pixel[2] ); $('.preview').css('backgroundColor', pixelColor); // update controls $('#rVal').val(pixel[0]); $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); $('#rgbVal').val(pixel[0] ',' pixel[1] ',' pixel[2]); var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0]; $('#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6)); } }); $('#picker').click(function(e) { // click event handler bCanPreview = !bCanPreview; }); CSS代碼 不同顏色底板的CSS: 復制代碼代碼如下:/* colorpicker styles */ .colorpicker { background-color: #222222; border-radius: 5px 5px 5px 5px; box-shadow: 2px 2px 2px #444444; color: #FFFFFF; font-size: 12px; position: absolute; width: 460px; } #picker { cursor: crosshair; float: left; margin: 10px; border: 0; } .controls { float: right; margin: 10px; } .controls div { border: 1px solid #2F2F2F; margin-bottom: 5px; overflow: hidden; padding: 5px; } .controls label { float: left; } .controls div input { background-color: #121212; border: 1px solid #2F2F2F; color: #DDDDDD; float: right; font-size: 10px; height: 14px; margin-left: 6px; text-align: center; text-transform: uppercase; width: 75px; } .preview { background: url(../images/select.png) repeat scroll center center transparent; border-radius: 3px; box-shadow: 2px 2px 2px #444444; cursor: pointer; height: 30px; width: 30px; } 希望大家喜歡

版權聲明:本文由 常又松 整理編輯。

原標題:技術開發是做什么的,技術開發屬于什么行業

轉載注明出處:http://www.dn9ww09s.icu/basics/11982.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦底部菜單欄不見了,電腦的菜單欄不見了

    電腦底部菜單欄不見了,電腦的菜單欄不見了 相關圖片電腦桌面菜單欄不見了當我們使用電腦時,電腦窗口的頂部會有一個菜單欄,非常方便,但有時我們不知道如何消失。一些用戶認為是中毒。他們想在那里殺死毒藥,但沒用。如果電腦...

  • 網站網頁布局,怎么布局網頁

    網站網頁布局,怎么布局網頁 相關圖片網頁左右布局代碼縮減采用div CSS布局,使代碼非常簡單。我相信所有熟悉這種方法的朋友都知道,只要調用CSS文件,就可以在每個web頁面中使用它們。用table tabl網頁布局有幾種...

  • 電腦上所有word打不開怎么辦,電腦里word打不開怎么回事

    電腦上所有word打不開怎么辦,電腦里word打不開怎么回事 相關圖片為啥word文檔打不開了在使用word文檔進行編輯時,經常會遇到文檔半編輯時的一些異常情況,導致文檔無法打開。什么情況?一個我們努力寫的word文檔就這么結束了?有辦法解決這個問...

  • 不會玩電腦教我怎么玩,教我學電腦

    不會玩電腦教我怎么玩,教我學電腦 相關圖片n卡筆記本Win7具有系統還原功能。如果系統損壞,可以使用此功能恢復系統。但是,在使用win7系統的過程中,有時需要關閉系統還原功能。win7如何關閉系統還原?現在讓我們有沒有教電...

  • css控件,css時間控件

    css控件,css時間控件 相關圖片js控件在用CSS刷新頁面時,我們很容易保存頁面控件的輸入值。例如,某些頁面意外刷新了頁面表單值,因此不再需要重新輸入。所以我們可以使用CSS來定義要保存的頁面刷新值。居中對...

  • 網絡視頻,網絡視頻分類

    網絡視頻,網絡視頻分類 相關圖片無網絡視頻怎么解決想必,用戶一定遇到過網絡視頻看不到的情況。一些網友如果不理解,會在網上查閱教程。然而,他們發現他們無法解釋網絡視頻無法看到的問題。他們認為這真的...

  • 表格怎么標記紅色,表格的標簽是什么

    表格怎么標記紅色,表格的標簽是什么 相關圖片excel標記這是網絡教學網提供的一系列教程,主要為初學者講解表單在網頁中的應用,包括最基本的知識、一些表單技巧等,希望大家能支持網絡教學。表是安排內容的最佳方式。在HT...

  • 電腦屏幕抖動閃爍,電腦屏幕上下抖動

    電腦屏幕抖動閃爍,電腦屏幕上下抖動 相關圖片顯示器屏幕抖動閃爍最近,我在貼吧上看到一些朋友說,有時候家里的電腦屏幕會一直突然晃動或閃爍,嚴重影響電腦的使用,很多人不知道在這種情況下該怎么辦。所以小編來告訴你...

  • robots.txt,robotstxt什么意思

    robots.txt,robotstxt什么意思 相關圖片txt分析工具Robots.txt是純文本文件。在此文件中,網站管理員可以聲明不希望機器人訪問的網站部分,或者指定的搜索引擎只能包含指定的內容。當搜索機器人(有些被稱為搜索蜘txt文件...

  • 電腦文件夾無法刪除怎么辦,電腦無法刪除文件夾

    電腦文件夾無法刪除怎么辦,電腦無法刪除文件夾 相關圖片一鍵刪除電腦空文件夾也許每個人都遇到過這種情況。刪除文件夾時,彈出提示:“文件夾不能刪除,文件夾文件不能被其他人或程序刪除。”。事實上,可能是空文件夾中的某些內容...

熱評文章

  • 電腦一直黑屏開不了機,win10怎么跳過自動修復

    電腦一直黑屏開不了機,win10怎么跳過自動修復 相關圖片電腦電壓不夠開不了機無論是在辦公室還是在游戲中,計算機已經成為我們生活中不可缺少的技術產品。如果電腦不能打開,工作就不能進行,游戲也不能玩。高清視頻見。那么如何解...

  • 電腦桌面圖標變大了,電腦桌面圖標變大了怎么辦

    電腦桌面圖標變大了,電腦桌面圖標變大了怎么辦 相關圖片電腦桌面圖標變大了怎么還原有些用戶不習慣win10系統。重新安裝win7系統后,他們發現桌面圖標變大了。屏幕已經小到可以容納幾個圖標。我該怎么辦?如果我放大桌面圖標,它會非常...

  • 小計時器,小型計時器

    小計時器,小型計時器 相關圖片科學小制作計時器在聽過計時器之后,你可能認為它只能在JS中實現,但事實上,當你不知道有HTML5的時候,這個想法就可以建立起來。以下是如何在HTML5中實現計時器。不要錯過HT簡易計...

  • wifi網絡受限,wifi網絡受限怎么辦

    wifi網絡受限,wifi網絡受限怎么辦 相關圖片wifi連接上不能上網怎么辦WiFi是一種允許電子設備連接到無線局域網(WLAN)的技術,通常使用2.4G UHF或5g SHF ism射頻頻段。連接到WLAN通常受密碼保護。下面是小編收wifi可以連接但不能上網...

  • 背景,展示背景圖

    背景,展示背景圖 相關圖片企業文化背景圖片展示! DOCTYPE HTML head metahttp equiv=content type content=text/HTML;charset=UTF-8/產品展示背景圖片...

  • 電腦虛擬內存不足,電腦顯示虛擬內存不足

    電腦虛擬內存不足,電腦顯示虛擬內存不足 相關圖片電腦虛擬內存不足是什么原因一個用戶在使用win10系統的過程中,電腦總是提示“虛擬內存不足,會關閉應用程序”,怎么回事?此用戶應將虛擬內存設置得太低。在這種情況下,我們只...

  • ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大

    ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大 相關圖片cdr怎么讓畫布和內容一樣大以下是10個HTML5畫布技術效果的演示,絕對會讓你大吃一驚。當然,你也可能認為,在過去,flash技術可以在老瀏覽器中實現這種效果。但是,以下演示僅使用...

  • 開機進不了安全模式,安全模式也進不去系統

    開機進不了安全模式,安全模式也進不去系統 相關圖片筆記本電腦怎么按f8如果計算機無法正常啟動,可以使用“安全模式”或其他啟動選項啟動計算機。電腦啟動時按F8鍵,然后在“啟動模式”菜單中選擇“安全模式”。然而,有時我們發...

  • 導航條,如何做導航條

    導航條,如何做導航條 相關圖片橫向導航條第一步是創建一個新的my.html文件。按如下所示填寫內容。此HTML文件在結束之前不需要移動。它是內容:CSS代碼將內容復制到剪貼板!Doctypehtmlp導航條隱藏...

  • 0xc0000001怎么修復,hp z4 g4安裝win7

    0xc0000001怎么修復,hp z4 g4安裝win7 相關圖片bios取消raid現在,重新安裝系統也是一件非常簡單的事情。安裝win7系統時遇到一些問題是最麻煩的事情。安裝win7系統時,系統會提示您找不到硬盤驅動器。通常會有兩種錯誤消息:安裝...

關注微信

变脸官网查询