顯示具有 html 標籤的文章。 顯示所有文章
顯示具有 html 標籤的文章。 顯示所有文章

2018年1月26日 星期五

HTML 事件属性

Window 事件屬性

針對 window 對象觸發的事件(應用到 <body> 標籤):
屬性值描述
onafterprintscript文檔打印之後運行的腳本。
onbeforeprintscript文檔打印之前運行的腳本。
onbeforeunloadscript文檔卸載之前運行的腳本。
onerrorscript在錯誤發生時運行的腳本。
onhaschangescript當文檔已改變時運行的腳本。
onloadscript頁面結束加載之後觸發。
onmessagescript在消息被觸發時運行的腳本。
onofflinescript當文檔離線時運行的腳本。
ononlinescript當文檔上線時運行的腳本。
onpagehidescript當窗口隱藏時運行的腳本。
onpageshowscript當窗口成為可見時運行的腳本。
onpopstatescript當窗口歷史記錄改變時運行的腳本。
onredoscript當文檔執行撤銷(redo)時運行的腳本。
onresizescript當瀏覽器窗口被調整大小時觸發。
onstoragescript在 Web Storage 區域更新後運行的腳本。
onundoscript在文檔執行 undo 時運行的腳本。
onunloadscript一旦頁面已下載時觸發(或者瀏覽器窗口已被關閉)。

Form 事件

由 HTML 表單內的動作觸發的事件(應用到幾乎所有 HTML 元素,但最常用在 form 元素中):
屬性值描述
onblurscript元素失去焦點時運行的腳本。
onchangescript在元素值被改變時運行的腳本。
oncontextmenuscript當上下文菜單被觸發時運行的腳本。
onfocusscript當元素獲得焦點時運行的腳本。
onformchangescript在表單改變時運行的腳本。
onforminputscript當表單獲得用戶輸入時運行的腳本。
oninputscript當元素獲得用戶輸入時運行的腳本。
oninvalidscript當元素無效時運行的腳本。
onresetscript當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。
onselectscript在元素中文本被選中後觸發。
onsubmitscript在提交表單時觸發。

Keyboard 事件

屬性值描述
onkeydownscript在用戶按下按鍵時觸發。
onkeypressscript在用戶敲擊按鈕時觸發。
onkeyupscript當用戶釋放按鍵時觸發。

Mouse 事件

由鼠標或類似用戶動作觸發的事件:
屬性值描述
onclickscript元素上發生鼠標點擊時觸發。
ondblclickscript元素上發生鼠標雙擊時觸發。
ondragscript元素被拖動時運行的腳本。
ondragendscript在拖動操作末端運行的腳本。
ondragenterscript當元素元素已被拖動到有效拖放區域時運行的腳本。
ondragleavescript當元素離開有效拖放目標時運行的腳本。
ondragoverscript當元素在有效拖放目標上正在被拖動時運行的腳本。
ondragstartscript在拖動操作開端運行的腳本。
ondropscript當被拖元素正在被拖放時運行的腳本。
onmousedownscript當元素上按下鼠標按鈕時觸發。
onmousemovescript當鼠標指針移動到元素上時觸發。
onmouseoutscript當鼠標指針移出元素時觸發。
onmouseoverscript當鼠標指針移動到元素上時觸發。
onmouseupscript當在元素上釋放鼠標按鈕時觸發。
onmousewheelscript當鼠標滾輪正在被滾動時運行的腳本。
onscrollscript當元素滾動條被滾動時運行的腳本。

Media 事件

由媒介(比如視頻、圖像和音頻)觸發的事件(適用於所有 HTML 元素,但常見於媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):
屬性值描述
onabortscript在退出時運行的腳本。
oncanplayscript當文件就緒可以開始播放時運行的腳本(緩衝已足夠開始時)。
oncanplaythroughscript當媒介能夠無需因緩衝而停止即可播放至結尾時運行的腳本。
ondurationchangescript當媒介長度改變時運行的腳本。
onemptiedscript當發生故障並且文件突然不可用時運行的腳本(比如連接意外斷開時)。
onendedscript當媒介已到達結尾時運行的腳本(可發送類似「感謝觀看」之類的消息)。
onerrorscript當在文件加載期間發生錯誤時運行的腳本。
onloadeddatascript當媒介數據已加載時運行的腳本。
onloadedmetadatascript當元數據(比如分辨率和時長)被加載時運行的腳本。
onloadstartscript在文件開始加載且未實際加載任何數據前運行的腳本。
onpausescript當媒介被用戶或程序暫停時運行的腳本。
onplayscript當媒介已就緒可以開始播放時運行的腳本。
onplayingscript當媒介已開始播放時運行的腳本。
onprogressscript當瀏覽器正在獲取媒介數據時運行的腳本。
onratechangescript每當回放速率改變時運行的腳本(比如當用戶切換到慢動作或快進模式)。
onreadystatechangescript每當就緒狀態改變時運行的腳本(就緒狀態監測媒介數據的狀態)。
onseekedscript當 seeking 屬性設置為 false(指示定位已結束)時運行的腳本。
onseekingscript當 seeking 屬性設置為 true(指示定位是活動的)時運行的腳本。
onstalledscript在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。
onsuspendscript在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。
ontimeupdatescript當播放位置改變時(比如當用戶快進到媒介中一個不同的位置時)運行的腳本。
onvolumechangescript每當音量改變時(包括將音量設置為靜音)時運行的腳本。
onwaitingscript當媒介已停止播放但打算繼續播放時(比如當媒介暫停已緩衝更多數據)運行腳本

2017年3月31日 星期五

(css, js)transition開發要注意的

1.
style.transition 與 style.transitionProperty 間的關係

若設置 style.transitionProperty, style.transition 有些瀏覽器會讀不到數據
但若設置  style.transition, style.transitionProperty會讀到數據

2.
設置多個動畫項目及使 duration 相同,但會根據項目數量,啟動多次的 transitionEnd

3.
多個動畫項目對應數目少於其量的 transitionDuration會如何設定

https://lightwave88.blogspot.tw/2017/03/csstransition.html

4.
什麼情況不會啟動 transitionEnd(不會動畫)

#display: none

#duration: 0s (即使設置 delay都不會動畫)

#屬性沒有變動

opacity: 0, visibility: hidden => 都會造成運動

5.
對正在的動畫,如何接續另一個新動畫

a.去除 transition 設定

b.// 重設(style)屬性
element.style.top=getComputedStyle(element).top;


參考

http://easings.net/zh-cn
http://cubic-bezier.com/#.17,.67,.83,.67

2017年3月27日 星期一

transition-timing-function

http://easings.net/zh-cn

JQ
緩動函數指定動畫效果在執行時的速度,使其看起來更加真實。
現實物體照著一定節奏移動,並不是一開始就移動很快的。當我們打開抽屜時,首先會讓它加速,然後慢下來。當某個東西往下掉時,首先是越掉越快,撞到地上後回彈,最終才又碰觸地板。
本頁可以在每次你需要時,幫助你找到想要的緩動函數。

linear

xt

css+js

  • easeInSine

  • easeOutSine

  • easeInOutSine

  • easeInQuad

  • easeOutQuad

  • easeInOutQuad

  • easeInCubic

  • easeOutCubic

  • easeInOutCubic

  • easeInQuart

  • easeOutQuart

  • easeInOutQuart

  • easeInQuint

  • easeOutQuint

  • easeInOutQuint

  • easeInExpo

  • easeOutExpo

  • easeInOutExpo

  • easeInCirc

  • easeOutCirc

  • easeInOutCirc

  • easeInBack

  • easeOutBack

  • easeInOutBack

js

  • easeInElastic

  • easeOutElastic

  • easeInOutElastic

  • easeInBounce

  • easeOutBounce

  • easeInOutBounce


CSS


ease,linear,ease-in,ease-out,ease-in-out, cubic-bezier