touchstart時開始計時并setInterval記錄秒數(shù),秒數(shù)足夠時該干嘛干嘛。
創(chuàng)新互聯(lián)公司是一家專業(yè)提供杜集企業(yè)網(wǎng)站建設,專注與做網(wǎng)站、成都網(wǎng)站制作、html5、小程序制作等業(yè)務。10年已為杜集眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。
1、點擊屏幕交互
點擊是最常用的手勢,經(jīng)常用于頁面切換。點擊引導可以作為注釋,用戶可以理解H5內(nèi)容,使用戶能夠按照H5的節(jié)奏操作。例如,在《帶上希望的種子去北京》中,用戶可以點擊手勢“檢查”行李箱,詳細查看H5設計的內(nèi)容。
2、連續(xù)點擊交互
連擊交互在游戲類中的應用比較多。在游戲類H5中,通常由連續(xù)點擊生成的數(shù)值關聯(lián)積分排名,具有競技性質(zhì)的H5可以進一步吸引用戶參與。例如,《漫威電影十周年》的“揍”滅霸小游戲,用戶繼續(xù)點擊屏幕,10秒內(nèi)的點擊次數(shù)就會計算出整個網(wǎng)絡排名。
3、長按交互
長按是用戶根據(jù)H5引導長時間觸摸頁面。長按交互用戶需要保持手指靜止狀態(tài),并在設計時提示H5播放進度參考,以避免乏味。例如,從騰訊公益的《敦煌未來博物館》設計的風化過程來看,用戶點擊手機即可看到壁畫隨著年份推移逐漸風化的場景,還可以喚醒用戶心中的文化保護意識。
4、滑動交互
拖拽交互必須在長按交互的基礎上滑動,從一個點拖動到另一個點可以讓用戶自行控制速度。適合圖片展示類的H5。例如,在《睡姿大比拼》中,用戶可以拖動角色肢體來創(chuàng)建各種有趣的睡眠姿勢。
5、重力交互
重力交互是一個非常直觀的表達形式,用戶可以輕松get到H5獲得樂趣,這意味著手機硬件能升級給H5設計帶來了更多的可能性。利用重力感應、陀螺儀、速度加速器等硬件,對H5的玩法進行創(chuàng)新,提高用戶的代入感。例如,安裝在《一“陸”狂飆,極速挑戰(zhàn)》上的賽車游戲是通過手機重力傳感來調(diào)整小車的方向。
6、全景交互
全景交互在屏幕中以360度展現(xiàn)所有場景,用戶可以通過滑動移動場景。這種H5格式(如VR)需要關注整個場景的設計,邊界連接要足夠順暢,全景加載內(nèi)容較大,一定要注意用戶等待和屏幕卡頓的問題。例如,華為出品的《我的榮耀5G世界》中全景互動展示了未來豐富多彩的5G世界。
以上幾種就是現(xiàn)目前比較常見的H5交互元素,如有幫助請采納~
在頁面中樣式中加上下面的css代碼
*{
-webkit-overflow-scrolling:?touch;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
!DOCTYPE html
html
head
meta charset="utf-8"/
title/title
script type="text/javascript" src=""/script
/head
body
div style="width:100%;"
div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px"長按我/div
/div
script
var timeOutEvent=0;
$(function(){
$("#touchArea").on({
touchstart: function(e){
timeOutEvent = setTimeout("longPress()",500);
e.preventDefault();
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function(){
clearTimeout(timeOutEvent);
if(timeOutEvent!=0){
alert("你這是點擊,不是長按");
}
return false;
}
})
});
function longPress(){
timeOutEvent = 0;
alert("長按事件觸發(fā)發(fā)");
}
/script
/body
/html
網(wǎng)站題目:html5長按,html5 按鈕
網(wǎng)站路徑:http://vcdvsql.cn/article24/dsigeje.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、Google、用戶體驗、面包屑導航、定制網(wǎng)站、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)