HTML5電子書也能做出超多超炫的翻頁效果,快看過來!
目前分類：HTML5教學 (106)
- Jun 08 Mon 2020 12:12
大禮包-送你6種超酷HTML5電子書效果
- Apr 29 Wed 2020 13:26
網頁前端CSS入門技巧- display與visible屬性介紹
- Apr 01 Wed 2020 11:00
看過來,零基礎也能學習網站前端!
- Jul 29 Mon 2019 23:08
脫離零基礎只要看這篇文章! 如何靠自學成為前端工程師?
想中途出家成為前端工程師, 自學能達成嗎?
- Jul 17 Wed 2019 20:32
前端工程師必備神器Emmet使用教學(四)顯示文字與自訂屬性
- Jul 16 Tue 2019 19:58
前端工程師不可以錯過的省時神器(三)
- Jul 15 Mon 2019 19:36
前端工程師必備神器Emmet使用教學(二)階層與群組
- Jul 15 Mon 2019 19:35
前端工程師不可以錯過的省時神器(二)
- Jul 12 Fri 2019 19:14
前端工程師必備神器Emmet使用教學(一)快速產生標籤名稱
- Jul 10 Wed 2019 16:37
資深前端工程師教你用HTML5繪製動畫路徑!!
- Jul 09 Tue 2019 16:01
不可不知HTML5如何繪製基本圖形動畫!!
- Jul 09 Tue 2019 00:59
新手前端工程師需要的 HTML5 入門課 (12)
- Jul 08 Mon 2019 00:48
新手前端工程師需要的 HTML5 入門課 (11)
- Jun 13 Thu 2019 23:00
前端工程師HTML5歸類出的內容第十部分
如何利用HTML5的SVG取代點陣圖?讓資深前端工程師告訴你!!
何謂 SVG?
因為過往網頁設計常使用的圖片檔如 jpg、png、gif 等都是點陣圖模式，但是時下流行的 RWD 響應式網頁可隨著螢幕調整網頁布局，點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮，因此HTML5的向量的 SVG 是不錯的解決方法。 SVG（Scalable Vector Graphics，可縮放向量圖形）是 W3C 制定的開放性網路標準之一，此圖片格式再網頁中能以向量格式呈現圖片。設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔，在放在網頁中。運用方式就跟 .jpg、.png、.gif 等圖片檔一樣，但不同的是 SVG 檔不會因尺寸的改變而失真，日後要修改時也可直接開啟檔案修改，相當方便。如何置入 SVG 影像到網頁中?
如同 .jpg、.png、.gif 的方式，SVG 圖檔使用 img 標籤被置入到 HTML5 檔中，如下方所示：<img src="image.svg" alt="" height="300" />
使用 SVG 畫圖形
要用 SVG 畫出簡單的圖形，首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性，如下例所示：<svg width="1000" height="1000"></svg>在此我們先舉「畫圓形」為例，如下所示：
<svg width="2000" height="2000"> <circle cx="80" cy="80" r="50" fill="magenta" /> </svg>
- - cx 圓心之ｘ軸座標
- - cy 圓心之 y 軸座標
- - r 半徑
- - fill 填滿色彩
- - stroke 圓形外框
- Jun 12 Wed 2019 22:18
新手前端工程師需要的 HTML5 課 番外篇
- Jun 06 Thu 2019 20:10
新手前端工程師需要的 HTML5 入門課 (九-下)
踏入前端工程師領域必備的九堂 HTML5 課(九-下)-Drag and Drop API(下)
- Jun 06 Thu 2019 00:35
前端工程師HTML5歸類出的內容第九部分partB
HTML5怎麼實現及實行能拖曳的元素呢?讓有經驗的資深工程師來告訴你!!
HTML5 Drag & Drop API-讓元素變得可拖曳
過去在網頁裡面實現 Drag & Drop 是很麻煩的，需要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制，讓前端工程師可直接使用 drag and drop 的功能，讓使用者透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。 所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)：<img draggable="true" />
HTML5 Drag & Drop API 的範例
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.
- Jun 05 Wed 2019 20:00
新手前端工程師需要的 HTML5 入門課 (九-上)
- Jun 05 Wed 2019 00:21
前端工程師HTML5歸類出的內容第九部分partA
這裡透過HTML5教你怎麼操作來源和目標做操作?一些步驟讓你啞口無言!!
數據傳輸DataTransfer
拖曳動作的目的，是為了對來源和目標元素做操作。為了完成整個操作，就需要在來源元素和目標元素間傳輸數據。在 HTML5 中，我們透過 Javascript 的 DataTransfer 完成數據傳輸。 我們在上例的 dragstart 時，就設置需要傳輸的數據，在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數：- setData(format, data)：用於添加數據，一般 format 對應於 MIME 類型字符串，常見的有 text/plain、text/html 及 text/uri-list 等，但同時也可以是任意自定義的類型；很不幸的是 data 只能是 string 或 file。
- getData(format)：用於獲取數據。
draggable.addEventListener（'dragstart'，（ev）=> {
ev.target.style.opacity = “。5” ;
//設置ID
ev.dataTransfer.setData（'text / plain'，ev.target.id）;
}）;
dropzones.forEach（（dropzone）=> {
dropzone.addEventListener（'drop'，（ev）=> {
ev.preventDefault（）
ev.target.style.borderStyle = 'solid' ;
//獲取ID const sourceId = ev.dataTransfer.getData（'text / plain'）
ev.target.appendChild（document .getElementById（sourceId）） }）}）;
- 在 dragstart 時，透過 setData 將 ID 放入 DataTransfer 中
- 在drop事件中，透過 getData 獲取元素 ID ，並透過 appendChild 加入到藍色的目標元素中。
- Jun 04 Tue 2019 22:58
前端工程師HTML5歸類出的內容第八部分
HTML5裡Web Storage 的優點有什麼?憑什麼取代了cookies呢?
