hammer.js
キーではなくタッチ機能をサポートするライブラリ
タッチイベント:モバイルデバイスごとに互換性が非常に異なります.
ライブラリの設定の使用
var 드래그할요소 = document.querySelectorAll(".slide-box img")[0]
var 매니저 = new Hammer.Manager(드래그할요소)
매니저.add(new Hammer.Pan({ threshold: 0 }))
매니저.on("pan", function (e) {種類
pan:スライドrotate:回転pinch:両指でつまむ(拡大/縮小)threshold:イベント起動の最小値(100であれば100 px以上でスライドします.)
매니저.on("pan", function (e) {
//x축으로 slide한 거리
if (e.deltaX < -1) {
$(".slide-container").css(
"transform",
`translateX(` + e.deltaX + `px)`
)e.deltaXアクティビティを拡張するために、eをパラメータとして、e.deltaX関数を使用してスライドのx座標を見つけます.負の水から左にスライドし、正水面から右にスライドします.
e.isFinal触ったかどうかを判断する.if (e.isFinal) {
$(".slide-container").addClass("transforming")
$(".slide-container").css(
"transform",
`translateX(-` + 지금보이는사진 + `00vw)`
)
setTimeout(function () {
$(".slide-container").removeClass("transforming")
}, 1000)
}.slide-containerにtransitionの効果を与えると、マウスに追いつかないエラーが発生します.----->classはCSS効果を単独で提供します.
.transforming{
transition: transform 1s;
}
.slide-container {
width: 300vw;
/* transition: transform 1s; */
/* transform: translateX(-100vw); */
}
function pic(index, 지금보이는사진) {
var 드래그할요소 = document.querySelectorAll(".slide-box img")[index]
var 매니저 = new Hammer.Manager(드래그할요소)
매니저.add(new Hammer.Pan({ threshold: 0 }))
매니저.on("pan", function (e) {
//x축으로 slide한 거리
console.log("index", index) //x축으로 slide한 거리
if (index == 3 || 지금보이는사진 == 3) return 1
if (e.deltaX < -1) {
$(".slide-container").css(
"transform",
`translateX(` + e.deltaX - 100 + `px)`
)
if (e.isFinal) {
$(".slide-container").addClass("transforming")
$(".slide-container").css(
"transform",
`translateX(-` + 지금보이는사진 + `00vw)`
)
console.log("지금보이는사진", 지금보이는사진)
지금보이는사진++
index++
setTimeout(function () {
$(".slide-container").removeClass("transforming")
}, 1000)
return pic(index, 지금보이는사진)
}
}
}
pic(index, 지금보이는사진)indexおよび지금보이는사진変数は再帰関数によって変化した.写真が3枚あれば動きを止めます.
Reference
この問題について(hammer.js), 我々は、より多くの情報をここで見つけました https://velog.io/@aksel26/hammer.jsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol