jQTouch 是一個(gè) jQuery 的插件，主要用于手機(jī)上的 Webkit 瀏覽器上實(shí)現(xiàn)一些包括動(dòng)畫列表導(dǎo)航默認(rèn)應(yīng)用樣式等各種常見UI效果的 JavaScript 庫支持包括 iPhoneAndroid 等手機(jī)3DHTMLX Touch DHTMLX Touch是一個(gè)免費(fèi)的HTML5JavaScript框架，專門為觸摸屏設(shè)備而優(yōu)化為您帶來快速開發(fā)工藝精美的移動(dòng)Web；1創(chuàng)建兩個(gè)html文件，一個(gè)test一個(gè)test22打開test頁面，在里面創(chuàng)建一個(gè)div，并給其添加onmousedown與move方法3打開后我們發(fā)現(xiàn)是一個(gè)棕綠的頁面4定義兩個(gè)變量，startx為鼠標(biāo)按下的坐標(biāo)，endx為鼠標(biāo)移動(dòng)的坐標(biāo)5實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊執(zhí)行的down方法，在里面通過clientX獲得鼠標(biāo)按下坐標(biāo)，并賦值給；Html5支持iPhone觸屏的腳本寫法是利用touch事件方法觸摸事件touch會(huì)在用戶手指放在屏幕上面的時(shí)候在屏幕上滑動(dòng)的時(shí)候或者是從屏幕上移開的時(shí)候出發(fā)下面具體說明touchstart事件當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)touchmove事件當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)；1如果是div設(shè)置了滾動(dòng)條導(dǎo)致滑動(dòng)不順暢，可以在css中加入webkitoverflowscrolling touch2如果是幻燈片，可以用swiper插件一類的3盡量用css3開啟GPU加速css隨便哪里加個(gè)transformtransition3d0，0，0，用transformtranslatex，y代替mairgin或者top4減少滑動(dòng)過程中的運(yùn)動(dòng)DOM。

1 右邊的刪除按鈕點(diǎn)擊失靈，因?yàn)閟pan無法冒泡到大按鈕上 2 非常嚴(yán)重的問題，我們給div添加了touchmove事件同時(shí)用preventDefault屏蔽了原始的瀏覽器事件，導(dǎo)致上下滑動(dòng)div的時(shí)候 頁面無法滾動(dòng)了！ 第一個(gè)問題比較容易解決，我們把span直接去掉，將“刪除”寫到css中的before里，像這樣 itemWipe itemdeletebefore；然后布置簡單的HTML的結(jié)構(gòu)，使用一個(gè)ltdiv作為滑塊的容器lt！滑塊容器 ltdiv id = quotfooquotltdiv 3最后初始化插件在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該滑動(dòng)解鎖插件var container = #39#foo#39containerslideToUnlockoptions配置參數(shù) unlockjs滑動(dòng)解鎖插件的配置；Zepto調(diào)用方式$#39#Marke#39touchSliderdirection #39v#39，itemSelector#39slide#39，slidePercent02directionvh，豎滑或橫滑itemSelector需要滑動(dòng)的一組DOM元素，使用同一的className來標(biāo)識(shí)slidePercent用戶滑動(dòng)多少百分比00～10后才會(huì)觸發(fā)slider，否則就還原到滑動(dòng)前的；html5 新增 touch 事件禁用手機(jī)默認(rèn)的觸屏滾動(dòng)行為documentaddEventListener#39touchmove#39， functionevent eventpreventDefault， falsetouchstart事件function touchSatrtFuncevt try evtpreventDefault 阻止觸摸時(shí)瀏覽器的縮放滾動(dòng)條滾動(dòng)等var touch = evttouches0；H5單頁面手勢(shì)滑屏切換是采用HTML5 觸摸事件Touch 和 CSS3動(dòng)畫Transform，Transition來實(shí)現(xiàn)的1實(shí)現(xiàn)原理假設(shè)有5個(gè)頁面，每個(gè)頁面占屏幕100%寬，則創(chuàng)建一個(gè)DIV容器viewport，將其寬度width 設(shè)置為500%，然后將5個(gè)頁面裝入容器中，并讓這5個(gè)頁面平分整個(gè)容器，最后將容器的默認(rèn)位置設(shè)置為0，overflow。

以下是一些專業(yè)的HTML5動(dòng)畫工具推薦1AnimateMate這是一款Sketch動(dòng)畫插件，可以輸出高品質(zhì)的WEB動(dòng)畫2Mugeda這是一個(gè)基于云平臺(tái)的專業(yè)可視化環(huán)境，用于直接在瀏覽器中制作富含動(dòng)畫和交互的HTML5內(nèi)容3HTML5Maker這是一款制作動(dòng)畫標(biāo)語和有感染力圖像的最佳幫手，而且它是免費(fèi)的4HippoStudios。

在win7下實(shí)現(xiàn)多點(diǎn)觸控方法首先，需要一臺(tái)支持觸摸特性的PC，目前市面上可選的產(chǎn)品主要有HP TouchSmart AllinOne PCs IQ500 series IQ800 seriesHP TouchSmart tx2 Tablet PCDell Latitude XT Tablet PC其次，需要安裝最新的多點(diǎn)觸摸驅(qū)動(dòng)以使得屏幕能夠識(shí)別觸摸指示不過這些驅(qū)動(dòng)目前都；2進(jìn)入后，先登錄自己的賬號(hào)，可以直接用微信登錄即可，登錄后就可以開始制作自己的手機(jī)網(wǎng)頁微場(chǎng)景了3首先點(diǎn)擊我的場(chǎng)景接著點(diǎn)擊制作場(chǎng)景，接著會(huì)進(jìn)入場(chǎng)景模板選擇界面，里面有很多免費(fèi)的模板4可以在模板中心選擇一個(gè)自己需要的點(diǎn)擊，直接套用模板，也可以選擇自己創(chuàng)建一個(gè)空白頁面5；規(guī)范 這里我們介紹幾種普及得比較好的觸摸事件，你可以在絕大多數(shù)現(xiàn)代瀏覽器中來測(cè)試這一事件必須是觸屏設(shè)備哦touchstart觸摸開始的時(shí)候觸發(fā) touchmove手指在屏幕上滑動(dòng)的時(shí)候觸發(fā) touchend觸摸結(jié)束的時(shí)候觸發(fā) 而每個(gè)觸摸事件都包括了三個(gè)觸摸列表，每個(gè)列表里包含了對(duì)應(yīng)的一系列觸摸點(diǎn)用來實(shí)現(xiàn)。

多么好玩！這里提供一個(gè)工具可以輕松實(shí)現(xiàn)陀螺儀重力效果的parallaxjs用法簡單，定義一個(gè)parallaxobj的父類，把需要?jiǎng)拥脑丶由蟣ayer的類，然后設(shè)置動(dòng)的范圍datadepth以上就是小編關(guān)于怎樣通過HTML5讓移動(dòng)APP頁面有動(dòng)效的相關(guān)分享，希望對(duì)大家有所幫助，想要了解更多HTML5相關(guān)內(nèi)容，還請(qǐng)關(guān)注本平臺(tái)；左右滑動(dòng)是由觸摸事件定義的，觸摸事件touch會(huì)在用戶手指放在屏幕上面的時(shí)候在屏幕上滑動(dòng)的時(shí)候或者是從屏幕上移開的時(shí)候觸發(fā)下面具體說明touchstart事件當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)touchmove事件當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)在這個(gè)事件發(fā)生期間。