整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          LEADTOOLS HTML5圖像教程

          零空間占用圖像應(yīng)用程序的概念已經(jīng)出現(xiàn)了一段時(shí)間,越來(lái)越多的人在日常任務(wù)中開(kāi)始依賴(lài)移動(dòng)設(shè)備和平板電腦,這個(gè)概念又重新流行了起來(lái)。平臺(tái)和操作系統(tǒng)的多樣性是一個(gè)挑戰(zhàn)。相同的應(yīng)用程序會(huì)運(yùn)行在任意的桌面、平板電腦或移動(dòng)設(shè)備上,在HTML5中采用Canvas元素是這個(gè)問(wèn)題的完美解決方案,同時(shí)增加了你的潛在客戶(hù)群,減少了開(kāi)發(fā)和支持的工作。

          LEADTOOLS現(xiàn)在包括一個(gè)可用于文檔和醫(yī)學(xué)圖像的JavaScript SDK。LEAD科技為程序員提供擁有最新圖像技術(shù)的程序友好的開(kāi)發(fā)工具包已經(jīng)20多年。專(zhuān)注于最新移動(dòng)設(shè)備和平板電腦的開(kāi)發(fā)者現(xiàn)在可以將強(qiáng)大的圖像技術(shù)如OCR、條碼、圖像顯示和處理、DICOM、PACS等添加至移動(dòng)app。

          LEADTOOLS SDK中HTML5 DICOM查看器的主要功能

          • 跨平臺(tái)圖像查看的HTML5/JavaScript查看器控件
          • 可以運(yùn)行在任意臺(tái)式機(jī)、平板電腦或移動(dòng)設(shè)備上,支持HTML5
          • 支持鼠標(biāo)和多觸控(手勢(shì))輸入
          • 交互模式包括:
          • 基于物理單元和邏輯單元的圖像顯示
          • 內(nèi)置的圖像操作:
          • 本地化的HTML5圖像注釋和標(biāo)記
          • 擴(kuò)展LEADTOOLS RESTful Web服務(wù),添加高級(jí)功能如擴(kuò)展的文件格式支持(如TIFF、PDF、DOC、DICOM等)、OCR和條碼
          • 使用窗位和元數(shù)據(jù)從本地存檔或任意遠(yuǎn)程PACS顯示DICOM圖像
          • 包含源碼的功能完整的DICOM查看應(yīng)用程序,易于定義和品牌化
          包含HTML5技術(shù)的SDK產(chǎn)品

          HTML5代碼

          在下面的例子中,我們將為您展示如何將HTML5 / JavaScript查看器控件添加到一個(gè)web頁(yè)面,如何加載一個(gè)圖像并設(shè)置一些交互模式。此外,我們將使用圖像格式RESTful web服務(wù)的JSON加載一個(gè)非web格式如PDF。

          HTML5/JavaScript查看器控件

          HTML5庫(kù)的主要HTML5對(duì)象是Canvas。與LEADTOOLS JavaScript庫(kù)結(jié)合,圖像畫(huà)布能夠以所有標(biāo)準(zhǔn)的UI功能顯示一個(gè)圖像,包括平移、縮放、放大鏡、中心等。所有的交互模式都可以在臺(tái)式機(jī)、平板電腦和手機(jī)上正常無(wú)縫工作,且支持鼠標(biāo)和多點(diǎn)觸控手勢(shì)輸入(如縮放)。

          為了在一個(gè)HTML文檔中添加查看器控件,你需要的只是一個(gè)包裝器div和在頁(yè)面加載時(shí)運(yùn)行的幾行JavaScript代碼,剩下的LEADTOOLS會(huì)幫你完成!

          你可以在標(biāo)準(zhǔn)

          標(biāo)簽中加載一個(gè)JPEG、PNG 或GIF,在div中封裝,然后你就能擁有一個(gè)具有滾動(dòng)條的基本“圖像查看器”。這就是交互模式起作用的地方,為查看器提供了豐富的UI功能如放大鏡以及在觸摸屏(或鼠標(biāo)上的Ctrl + Click)上平移、縮放的能力。在HTML中添加按鈕后,你必須修改事件處理器上的運(yùn)行方法。

          var buttonPanZoom = document.getElementById('buttonPanZoom');
          buttonPanZoom.addEventListener('click', function (e) {
             // 將交互模式設(shè)置為PanZoom
             var interactiveModePanZoom = new
          Leadtools.Controls.ImageViewerPanZoomInteractiveMode;
             _viewer.set_defaultInteractiveMode(interactiveModePanZoom);
          }, false);
            
          var buttonMagnify = document.getElementById('buttonMagnify');
          buttonMagnify.addEventListener('click', function (e) {
             // 將交互模式設(shè)置為MagnifyingGlass
             var interactiveModeMagGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode;
             interactiveModeMagGlass.set_borderThickness(5);
             _viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
          }, false);

          RESTful Web服務(wù)

          REST不是新技術(shù),它是HTTP 1.0 和1.1的一部分,但是許多web應(yīng)用程序已經(jīng)遠(yuǎn)離了它。然而,當(dāng)使用零空間占用時(shí),客戶(hù)端應(yīng)用程序使用HTML5和JavaScript,由于它能與 JavaScript對(duì)象注釋?zhuān)↗SON)進(jìn)行簡(jiǎn)單交互,因此REST是一個(gè)更好的選擇。

          LEADTOOLS為圖像格式(如下所示)、OCR、條碼和圖像處理提供了RESTful web服務(wù)。圖像格式web服務(wù)可以接收任意圖像,將它轉(zhuǎn)化為web可顯示的格式,然后將它返回給查看器。這意味著一個(gè)人可以加載和顯示LEADTOOLS支持的150多種格式中的任意一種。

          你可以調(diào)用REST服務(wù)并手動(dòng)解析JSON,獲取圖像信息如寬度、高度等。這也并不總是必要的,但是,查看器可以簡(jiǎn)單的將它傳遞給服務(wù)URL,完成所有這些工作。

          loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
             // 這是我們想要加載的圖像
            var imageUrl ="http://demo.leadtools.com/images/pdf/leadtools.pdf"; // 將它添加到REST服務(wù)加載方法中 var restLoad ="http://localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" + imageUrl; // 在查看器中設(shè)置它 _viewer.set_imageUrl(restLoad); },

          總結(jié)

          LEADTOOLS為開(kāi)發(fā)者提供了全世界一流的穩(wěn)定圖像庫(kù),易于使用的高級(jí)編程接口讓業(yè)務(wù)關(guān)鍵型應(yīng)用程序的快速開(kāi)發(fā)變?yōu)榭赡堋?/p>

          HTML5和RESTful Web服務(wù)只是LEADTOOLS提供的若干技術(shù)中的一個(gè)。若想了解我們產(chǎn)品的更多信息,歡迎訪問(wèn)我們的主頁(yè),下載功能完整的試用版SDK,在試用期間歡迎您使用我們的免費(fèi)技術(shù)支持。

          購(gòu)買(mǎi)最新正版授權(quán)!"咨詢(xún)?cè)诰€(xiàn)客服"

          慧都年終盛典火爆開(kāi)啟,一年僅一次的最強(qiáng)促銷(xiāo),破冰鉅惠不容錯(cuò)過(guò)!!

          本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯

          習(xí)前端還是很有趣的,因?yàn)榭梢暂^快的上手,然后自己開(kāi)發(fā)一些好玩的項(xiàng)目來(lái)練手,并且網(wǎng)上也可以搜集很多關(guān)于前端開(kāi)發(fā)的小項(xiàng)目,可還是新手的你,在學(xué)習(xí)的時(shí)候不知道可以做什么,以及怎么做;因此,就整理了一些前端資料,希望可以幫助正在學(xué)習(xí)前端的小伙伴。為了方便你,大概把前端可以做的項(xiàng)目分為三類(lèi):

          ?游戲類(lèi)

          ?實(shí)用類(lèi)

          ?好玩類(lèi)

          然后依次推薦一些項(xiàng)目資料,想要學(xué)習(xí)的小伙伴可以看看~

          游戲類(lèi)

          其實(shí)很多常見(jiàn)的小游戲都是純前端開(kāi)發(fā)出來(lái)的,比如曾經(jīng)風(fēng)靡的2048、別踩白塊啊等等,簡(jiǎn)單有趣,對(duì)于初學(xué)者來(lái)說(shuō),這些小游戲是非常不錯(cuò)的練手項(xiàng)目。

          網(wǎng)頁(yè)版2048

          項(xiàng)目通過(guò)搭建一個(gè)網(wǎng)頁(yè)版的 2048 ,讓大家學(xué)習(xí) web 應(yīng)用程序的開(kāi)發(fā)流程、以及如何讓?xiě)?yīng)用在移動(dòng)端自適應(yīng)處理以應(yīng)對(duì)各種大小的屏幕,布局和初始化,編寫(xiě)游戲的邏輯、實(shí)現(xiàn)讓它能移動(dòng),判定結(jié)果。

          是不是和我們玩的2048一模一樣呀,O(∩_∩)O~

          HTML5兩步實(shí)現(xiàn)拼圖游戲

          項(xiàng)目使用HTML5和css3實(shí)現(xiàn)的九宮格拼圖游戲。只要兩步既可以實(shí)現(xiàn)炫酷的效果和動(dòng)畫(huà)。詳細(xì)的講解,讓你清楚地知道每一句代碼的作用。自己開(kāi)發(fā)完之后還可以玩玩,告訴你,你可以開(kāi)發(fā)它,但是玩可不一定行哦~

          網(wǎng)頁(yè)版掃雷

          項(xiàng)目實(shí)現(xiàn)一個(gè)Web版本的掃雷游戲,通過(guò)該項(xiàng)目將學(xué)習(xí)并實(shí)踐 JavaScript 和 CSS 等基本的Web開(kāi)發(fā)知識(shí)。

          看著就有想玩的沖動(dòng)啊,有木有~

          網(wǎng)頁(yè)版-別踩白塊游戲

          項(xiàng)目用最基礎(chǔ)的html,css,以及原生的JavaScript實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)版本的“別踩白塊”游戲。

          做完后可以試著玩玩,看看速度如何,太快或者太慢都可以隨時(shí)調(diào)整。

          HTML5實(shí)現(xiàn)抓怪物小游戲

          項(xiàng)目利用 HTML5 的 Canvas 特性,結(jié)合 js 來(lái)開(kāi)發(fā)一個(gè)抓小怪物的小游戲。從中我們可以學(xué)習(xí)到如何用 HTML5 來(lái)構(gòu)建一個(gè) WebApp。

          JavaScript打地鼠游戲

          項(xiàng)目為打地鼠,是大家耳熟能詳?shù)囊豢罱?jīng)典的小游戲,用前端技術(shù)來(lái)實(shí)現(xiàn)這個(gè)游戲,簡(jiǎn)單有趣。

          JavaScript按鍵控制坦克移動(dòng)

          項(xiàng)目使用javascript按鍵控制坦克在網(wǎng)頁(yè)上移動(dòng),通過(guò)使用很簡(jiǎn)單的,清晰明了的代碼使坦克在頁(yè)面上平滑的移動(dòng),通過(guò)學(xué)習(xí),可以掌握javascript的按鍵操作,從而讓頁(yè)面更好的與用戶(hù)互動(dòng)。

          看效果圖很簡(jiǎn)單,但是只要稍微發(fā)揮你的想象力,把坦克改成其他的物體,就可以變成其他的小游戲了,比如加一個(gè)迷宮,就是走出迷宮游戲了。

          實(shí)用類(lèi)

          前面介紹了前端開(kāi)發(fā)游戲的項(xiàng)目教程,當(dāng)然前端還可以開(kāi)發(fā)一些非常實(shí)用的功能,比如小到網(wǎng)站的導(dǎo)航條啊,一個(gè)抽獎(jiǎng)頁(yè)面啊等等,這些在網(wǎng)頁(yè)上經(jīng)常看到的頁(yè)面展示功能,基本都是前端開(kāi)發(fā)出來(lái)的,因此,下面介紹一些比較實(shí)用的前端項(xiàng)目教程。

          CSS與JavaScript實(shí)現(xiàn)選項(xiàng)卡

          這個(gè)項(xiàng)目實(shí)現(xiàn)前端網(wǎng)頁(yè)經(jīng)常用到的 Tab 選項(xiàng)卡效果。主要用到 HTML、CSS 和 JavaScript 技術(shù),比較適合前端入門(mén)練習(xí)。

          一起來(lái)抽獎(jiǎng)吧

          一到各種節(jié)假日就各種的抽獎(jiǎng)活動(dòng)數(shù)不勝數(shù),大獎(jiǎng)很豐厚,但是,你懂得。這個(gè)項(xiàng)目教大家使用CSS3來(lái)制作一個(gè)抽獎(jiǎng)轉(zhuǎn)盤(pán),一窺抽獎(jiǎng)轉(zhuǎn)盤(pán)的秘密。

          Java和WebSocket開(kāi)發(fā)網(wǎng)頁(yè)聊天室

          WebSocket是HTML5一種新的協(xié)議,它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信,這個(gè)項(xiàng)目使用WebSocket來(lái)開(kāi)發(fā)網(wǎng)頁(yè)聊天室,前端框架會(huì)使用AmazeUI,后臺(tái)使用Java,編輯器使用UMEditor。

          瀑布流加載圖片墻

          項(xiàng)目通過(guò)瀑布流加載圖片墻,實(shí)現(xiàn)無(wú)限圖片展示的效果,類(lèi)似百度圖片一樣的加載方式,體現(xiàn)圖片的交錯(cuò)排列。從中學(xué)習(xí)在沒(méi)有后端開(kāi)發(fā)者提供數(shù)據(jù)的背景下,由我們前端自己模擬數(shù)據(jù)及數(shù)據(jù)接口,自己就能給自己提供任何自己想要的數(shù)據(jù)。

          canvas實(shí)現(xiàn)放大鏡效果

          項(xiàng)目由 HTML5 的 canvas 實(shí)現(xiàn)放大鏡效果,和淘寶圖片放大器類(lèi)似的效果,主要依靠 canvas 中的 drawImage() 函數(shù),希望能通過(guò)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的項(xiàng)目來(lái)讓大家初步認(rèn)識(shí) canvas ,學(xué)會(huì)基本的 canvas 操作。

          用CSS和jQuery打造一個(gè)簡(jiǎn)單的圖片編輯器

          項(xiàng)目利用 CSS 的 filter 和簡(jiǎn)單的 Jquery 代碼來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器包括對(duì)圖片的透明度,黑白,圖片亮度等調(diào)節(jié)。

          120行代碼實(shí)現(xiàn)簡(jiǎn)單的即時(shí)搜索

          項(xiàng)目利用 Meteor 和 MongoDB 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的即時(shí)搜索服務(wù)。通過(guò)本項(xiàng)目將學(xué)習(xí)到 Mongodb 數(shù)據(jù)庫(kù)的操作,Meteor 快速制作 Web App。

          純前端打造實(shí)時(shí)markdown編輯器

          項(xiàng)目通過(guò)純前端打造一個(gè)實(shí)時(shí) markdown 編輯器,用到的庫(kù)或框架主要有 marked,Ace,highlight.js,Bootstrap。通過(guò)本實(shí)驗(yàn)學(xué)習(xí)如何編寫(xiě)一個(gè) web 應(yīng)用程序的相關(guān)知識(shí)。

          CSS3實(shí)現(xiàn)“紅包照片”模糊效果

          微信朋友圈里的紅包照片,還有 ios7 帶來(lái)的“毛玻璃”菜單效果都很吸引眼球,該項(xiàng)目就嘗試用熟悉的 CSS3 來(lái)實(shí)現(xiàn)這個(gè)效果。

          使用 Electron 編寫(xiě)跨平臺(tái)桌面應(yīng)用

          該項(xiàng)目主要學(xué)習(xí)如何用 Electron 配合 JavaScript 等 web 技術(shù)創(chuàng)建跨 Linux/Windows/macOS 平臺(tái)的桌面應(yīng)用。

          好玩類(lèi)

          前端還可以用比較簡(jiǎn)單的方式實(shí)現(xiàn)一些可愛(ài)的東西,比如暖男-大白,萌寵-小黃人等等,只要你能想到的,幾乎都可以用前端來(lái)實(shí)現(xiàn),下面就介紹幾個(gè)項(xiàng)目教程。

          打造網(wǎng)頁(yè)版「大白」

          該項(xiàng)目利用 HTML 和 CSS 來(lái)打造《超能陸戰(zhàn)隊(duì)》里的 “暖男” -「大白」。學(xué)習(xí)如何用 HTML 結(jié)合 CSS 來(lái)設(shè)計(jì)高端大氣上檔次的圖,并了解 HTML 布局,CSS 構(gòu)建對(duì)象的樣式。

          JavaScript實(shí)現(xiàn)玫瑰花

          項(xiàng)目學(xué)習(xí)如何在網(wǎng)頁(yè)中如何使用JavaScript語(yǔ)言實(shí)現(xiàn)一朵漂亮的玫瑰花。其中會(huì)用到html,css,javascript等技術(shù)。

          這個(gè)玫瑰花的最后效果是慢慢開(kāi)放和顯現(xiàn)出來(lái)的,很浪漫的趕腳啊~

          SCSS(SASS)畫(huà)小黃人

          項(xiàng)目通過(guò) SCSS(SASS)畫(huà)一個(gè)會(huì)眨眼睛的小黃人,主要學(xué)習(xí) CSS3。其中將涉及 SASS 安裝,代碼的編寫(xiě),以及繪制小黃人的相關(guān)結(jié)構(gòu)邏輯。

          看完以上3個(gè)項(xiàng)目,你能想象都是用前端來(lái)實(shí)現(xiàn)的么,O(∩_∩)O~

          源碼可以私信我哦

          以上呢,介紹了那么多的前端開(kāi)發(fā)項(xiàng)目,如果你還說(shuō)你找不到項(xiàng)目,不知道做什么,沒(méi)有完整的教程,那么就是你的不對(duì)了,所以,挑選一個(gè)感興趣的項(xiàng)目開(kāi)始學(xué)習(xí)吧!

          eb前端還是很有趣的,可以較快的上手然后自己開(kāi)發(fā)一些好玩的項(xiàng)目來(lái)練手,網(wǎng)上也可以一抓一大把關(guān)于前端開(kāi)發(fā)的小項(xiàng)目,可是還是有新手在學(xué)習(xí)的時(shí)候不知道可以做什么,以及怎么做,因此,實(shí)驗(yàn)樓就整理了一些前端項(xiàng)目教程,希望可以幫助正在學(xué)習(xí)前端的小伙伴。

          為了方便閱讀,大概把前端可以做的項(xiàng)目分為三類(lèi):

          • 游戲類(lèi)
          • 實(shí)用類(lèi)
          • 好玩類(lèi)

          然后依次推薦一些項(xiàng)目教程,想要學(xué)習(xí)的小伙伴可以看看~

          web前端實(shí)戰(zhàn)項(xiàng)目案例 獲取方式:轉(zhuǎn)發(fā)關(guān)注+私信菜菜 “ 教程 ”

          游戲類(lèi)

          其實(shí)很多常見(jiàn)的小游戲都是純前端開(kāi)發(fā)出來(lái)的,比如曾經(jīng)風(fēng)靡的2048、別踩白塊啊等等,簡(jiǎn)單有趣,對(duì)于初學(xué)者來(lái)說(shuō),這些小游戲是非常不錯(cuò)的練手項(xiàng)目。

          網(wǎng)頁(yè)版2048

          項(xiàng)目通過(guò)搭建一個(gè)網(wǎng)頁(yè)版的 2048 ,讓大家學(xué)習(xí) web 應(yīng)用程序的開(kāi)發(fā)流程、以及如何讓?xiě)?yīng)用在移動(dòng)端自適應(yīng)處理以應(yīng)對(duì)各種大小的屏幕,布局和初始化,編寫(xiě)游戲的邏輯、實(shí)現(xiàn)讓它能移動(dòng),判定結(jié)果。

          效果圖

          是不是和我們玩的2048一模一樣呀,O(∩_∩)O~

          HTML5兩步實(shí)現(xiàn)拼圖游戲

          項(xiàng)目使用HTML5和css3實(shí)現(xiàn)的九宮格拼圖游戲。只要兩步既可以實(shí)現(xiàn)炫酷的效果和動(dòng)畫(huà)。詳細(xì)的講解,讓你清楚地知道每一句代碼的作用。

          效果圖

          自己開(kāi)發(fā)完之后還可以玩玩,告訴你,你可以開(kāi)發(fā)它,但是玩可不一定行哦~

          網(wǎng)頁(yè)版掃雷

          項(xiàng)目實(shí)現(xiàn)一個(gè)Web版本的掃雷游戲,通過(guò)該項(xiàng)目將學(xué)習(xí)并實(shí)踐 JavaScript 和 CSS 等基本的Web開(kāi)發(fā)知識(shí)。

          效果圖

          看著就有想玩的沖動(dòng)啊,有木有~

          網(wǎng)頁(yè)版-別踩白塊游戲

          項(xiàng)目用最基礎(chǔ)的html,css,以及原生的JavaScript實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)版本的“別踩白塊”游戲。

          效果圖

          做完后可以試著玩玩,看看速度如何,太快或者太慢都可以隨時(shí)調(diào)整。

          HTML5實(shí)現(xiàn)抓怪物小游戲

          項(xiàng)目利用 HTML5 的 Canvas 特性,結(jié)合 js 來(lái)開(kāi)發(fā)一個(gè)抓小怪物的小游戲。從中我們可以學(xué)習(xí)到如何用 HTML5 來(lái)構(gòu)建一個(gè) WebApp。

          效果圖

          JavaScript打地鼠游戲

          項(xiàng)目為打地鼠,是大家耳熟能詳?shù)囊豢罱?jīng)典的小游戲,用前端技術(shù)來(lái)實(shí)現(xiàn)這個(gè)游戲,簡(jiǎn)單有趣。

          效果圖

          JavaScript按鍵控制坦克移動(dòng)

          項(xiàng)目使用javascript按鍵控制坦克在網(wǎng)頁(yè)上移動(dòng),通過(guò)使用很簡(jiǎn)單的,清晰明了的代碼使坦克在頁(yè)面上平滑的移動(dòng),通過(guò)學(xué)習(xí),可以掌握javascript的按鍵操作,從而讓頁(yè)面更好的與用戶(hù)互動(dòng)。

          效果圖

          看效果圖很簡(jiǎn)單,但是只要稍微發(fā)揮你的想象力,把坦克改成其他的物體,就可以變成其他的小游戲了,比如加一個(gè)迷宮,就是走出迷宮游戲了。

          實(shí)用類(lèi)

          前面介紹了前端開(kāi)發(fā)游戲的項(xiàng)目教程,當(dāng)然前端還可以開(kāi)發(fā)一些非常實(shí)用的功能,比如小到網(wǎng)站的導(dǎo)航條啊,一個(gè)抽獎(jiǎng)頁(yè)面啊等等,這些在網(wǎng)頁(yè)上經(jīng)常看到的頁(yè)面展示功能,基本都是前端開(kāi)發(fā)出來(lái)的,因此,下面介紹一些比較實(shí)用的前端項(xiàng)目教程。

          CSS與JavaScript實(shí)現(xiàn)選項(xiàng)卡

          這個(gè)項(xiàng)目實(shí)現(xiàn)前端網(wǎng)頁(yè)經(jīng)常用到的 Tab 選項(xiàng)卡效果。主要用到 HTML、CSS 和 JavaScript 技術(shù),比較適合前端入門(mén)練習(xí)。

          一起來(lái)抽獎(jiǎng)吧

          一到各種節(jié)假日就各種的抽獎(jiǎng)活動(dòng)數(shù)不勝數(shù),大獎(jiǎng)很豐厚,但是,你懂得。這個(gè)項(xiàng)目教大家使用CSS3來(lái)制作一個(gè)抽獎(jiǎng)轉(zhuǎn)盤(pán),一窺抽獎(jiǎng)轉(zhuǎn)盤(pán)的秘密。

          效果圖

          Java和WebSocket開(kāi)發(fā)網(wǎng)頁(yè)聊天室

          WebSocket是HTML5一種新的協(xié)議,它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信,這個(gè)項(xiàng)目使用WebSocket來(lái)開(kāi)發(fā)網(wǎng)頁(yè)聊天室,前端框架會(huì)使用AmazeUI,后臺(tái)使用Java,編輯器使用UMEditor。

          效果圖

          瀑布流加載圖片墻

          項(xiàng)目通過(guò)瀑布流加載圖片墻,實(shí)現(xiàn)無(wú)限圖片展示的效果,類(lèi)似百度圖片一樣的加載方式,體現(xiàn)圖片的交錯(cuò)排列。從中學(xué)習(xí)在沒(méi)有后端開(kāi)發(fā)者提供數(shù)據(jù)的背景下,由我們前端自己模擬數(shù)據(jù)及數(shù)據(jù)接口,自己就能給自己提供任何自己想要的數(shù)據(jù)。

          效果圖

          canvas實(shí)現(xiàn)放大鏡效果

          項(xiàng)目由 HTML5 的 canvas 實(shí)現(xiàn)放大鏡效果,和淘寶圖片放大器類(lèi)似的效果,主要依靠 canvas 中的 drawImage() 函數(shù),希望能通過(guò)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的項(xiàng)目來(lái)讓大家初步認(rèn)識(shí) canvas ,學(xué)會(huì)基本的 canvas 操作。

          效果圖

          用CSS和jQuery打造一個(gè)簡(jiǎn)單的圖片編輯器

          項(xiàng)目利用 CSS 的 filter 和簡(jiǎn)單的 Jquery 代碼來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器包括對(duì)圖片的透明度,黑白,圖片亮度等調(diào)節(jié)。

          120行代碼實(shí)現(xiàn)簡(jiǎn)單的即時(shí)搜索

          項(xiàng)目利用 Meteor 和 MongoDB 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的即時(shí)搜索服務(wù)。通過(guò)本項(xiàng)目將學(xué)習(xí)到 Mongodb 數(shù)據(jù)庫(kù)的操作,Meteor 快速制作 Web App。

          效果圖

          純前端打造實(shí)時(shí)markdown編輯器

          項(xiàng)目通過(guò)純前端打造一個(gè)實(shí)時(shí) markdown 編輯器,用到的庫(kù)或框架主要有 marked,Ace,highlight.js,Bootstrap。通過(guò)本實(shí)驗(yàn)學(xué)習(xí)如何編寫(xiě)一個(gè) web 應(yīng)用程序的相關(guān)知識(shí)。

          效果圖

          HTML5 本地裁剪圖片

          項(xiàng)目利用HTML5的canvas技術(shù),結(jié)合HTML5的File API來(lái)實(shí)現(xiàn)圖片的本地裁剪。通過(guò)本實(shí)驗(yàn)將學(xué)習(xí)到如何用 HTML5編寫(xiě)網(wǎng)絡(luò)應(yīng)用。

          效果圖

          CSS3實(shí)現(xiàn)“紅包照片”模糊效果

          微信朋友圈里的紅包照片,還有 ios7 帶來(lái)的“毛玻璃”菜單效果都很吸引眼球,該項(xiàng)目就嘗試用熟悉的 CSS3 來(lái)實(shí)現(xiàn)這個(gè)效果。

          使用 Electron 編寫(xiě)跨平臺(tái)桌面應(yīng)用

          該項(xiàng)目主要學(xué)習(xí)如何用 Electron 配合 JavaScript 等 web 技術(shù)創(chuàng)建跨 Linux/Windows/macOS 平臺(tái)的桌面應(yīng)用。

          好玩類(lèi)

          前端還可以用比較簡(jiǎn)單的方式實(shí)現(xiàn)一些可愛(ài)的東西,比如暖男-大白,萌寵-小黃人等等,只要你能想到的,幾乎都可以用前端來(lái)實(shí)現(xiàn),下面就介紹幾個(gè)項(xiàng)目教程。

          打造網(wǎng)頁(yè)版「大白」

          該項(xiàng)目利用 HTML 和 CSS 來(lái)打造《超能陸戰(zhàn)隊(duì)》里的 “暖男” -「大白」。學(xué)習(xí)如何用 HTML 結(jié)合 CSS 來(lái)設(shè)計(jì)高端大氣上檔次的圖,并了解 HTML 布局,CSS 構(gòu)建對(duì)象的樣式。

          效果圖

          JavaScript實(shí)現(xiàn)玫瑰花

          項(xiàng)目學(xué)習(xí)如何在網(wǎng)頁(yè)中如何使用JavaScript語(yǔ)言實(shí)現(xiàn)一朵漂亮的玫瑰花。其中會(huì)用到html,css,javascript等技術(shù)。

          效果圖

          這個(gè)玫瑰花的最后效果是慢慢開(kāi)放和顯現(xiàn)出來(lái)的,很浪漫的趕腳啊~

          SCSS(SASS)畫(huà)小黃人

          項(xiàng)目通過(guò) SCSS(SASS)畫(huà)一個(gè)會(huì)眨眼睛的小黃人,主要學(xué)習(xí) CSS3。其中將涉及 SASS 安裝,代碼的編寫(xiě),以及繪制小黃人的相關(guān)結(jié)構(gòu)邏輯。

          效果圖

          看完以上3個(gè)項(xiàng)目,你能想象都是用前端來(lái)實(shí)現(xiàn)的么,O(∩_∩)O~

          web前端學(xué)習(xí)資料 獲取方式:轉(zhuǎn)發(fā)關(guān)注+私信菜菜 “ 教程 ”


          主站蜘蛛池模板: 亚洲制服中文字幕第一区| 美女视频在线一区二区三区| 久久综合精品国产一区二区三区| 夜夜添无码一区二区三区| 亚洲熟妇AV一区二区三区浪潮| 国产一区二区三区露脸| 一区二区三区四区免费视频| 免费萌白酱国产一区二区 | 国产高清在线精品一区二区| 97se色综合一区二区二区| 无码少妇一区二区三区浪潮AV| 高清一区二区在线观看| 韩国精品一区二区三区无码视频 | 午夜福利一区二区三区高清视频| 综合激情区视频一区视频二区| 日韩国产免费一区二区三区| 国产福利91精品一区二区 | 秋霞无码一区二区| 亚洲av无码一区二区三区天堂古代 | 国产日韩一区二区三免费高清| 黑人一区二区三区中文字幕| 亚洲人AV永久一区二区三区久久| 国产一区在线电影| 国产亚洲一区二区三区在线不卡| 久久免费国产精品一区二区| 久久se精品一区精品二区| 国产精品视频分类一区| 波多野结衣在线观看一区二区三区| 国产精品小黄鸭一区二区三区| 日本免费电影一区二区| 亚洲AV无码一区二区三区鸳鸯影院| 日韩精品一区二区三区中文版| 久久精品国产亚洲一区二区三区| 久久中文字幕一区二区| 国产日韩精品一区二区三区| 国产一区二区免费视频| 日韩精品一区二区三区毛片| 色欲AV蜜臀一区二区三区| 国产女人乱人伦精品一区二区| 免费av一区二区三区| 婷婷国产成人精品一区二|