Dieser Artikel stellt Ihnen die Implementierung von H5 vor. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen hilfreich sein.
Methode eins:
jquery-Methode
movePage($('body')); function movePage(dom) { var startY, moveY, moveSpave; dom.on("touchstart", function(e) { startY = e.originalEvent.touches[0].pageY; return startY; }); dom.on("touchmove", function(e) { moveY = e.originalEvent.touches[0].pageY; moveSpave = startY - moveY; if (moveSpave > 15) { location.href = 'main.html'; /* 跳转到main.html */ } }); }
Methode zwei:
Native Methode
var strat,move,num; /*定义三个变量, 记录开始、结束距离顶部的距离*/ p_demo.addEventListener("touchstart", function (e){ /*触摸开始*/ console.log("触摸开始") // console.log(e) start = e.touches[0].pageY; console.log(start) /*得出刚触屏时距离页面顶部的距离*/ }) p_demo.addEventListener("touchmove", function (e){ /*触摸移动*/ console.log("触摸移动") // console.log(e) move = e.touches[0].pageY; console.log(move) /*得出触屏结束后距离页面顶部的距离*/ }) p_demo.addEventListener("touchend", function (e){ /*触摸结束*/ console.log("触摸结束") // console.log(e) num = start - move ; /*得出开始和结束距离页面顶部的差值*/ if(num>15){ location.href="main.html" /* 跳转到main.html */ } })
Zusammenfassung: Das Obige ist die Zusammenfassung von Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial, jQuery-Video-Tutorial!
Verwandte Empfehlungen:
PHP-Video-Tutorial zum Gemeinwohltraining
HTML5-Codesammlung für Spezialeffekte
Das obige ist der detaillierte Inhalt vonImplementierung der H5-Slide-Up-Sprungseite (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!