这是一个js麻将叠牌轮播插件。 高位轮播中的所有图片像扑克牌一样堆叠在一起，通过键盘拖放前面的图片即可显示下一张图片。
如何使用
在HTML文件中引入。
HTML结构
然后使用下面的代码初始化插件。
class Carousel {
constructor(element) {
this.board = element
// add first two cards programmatically
this.push()
this.push()
// handle gestures
this.handle()
}
handle() {
// list all cards
this.cards = this.board.querySelectorAll('.card')
// get top card
this.topCard = this.cards[this.cards.length-1]
// get next card
this.nextCard = this.cards[this.cards.length-2]
// if at least one card is present
if (this.cards.length > 0) {
// set default top card position and scale
this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
// destroy previous Hammer instance, if present
if (this.hammer) this.hammer.destroy()
// listen for tap and pan gestures on top card
this.hammer = new Hammer(this.topCard)
this.hammer.add(new Hammer.Tap())
this.hammer.add(new Hammer.Pan({ position: Hammer.position_ALL, threshold: 0 }))
// pass events data to custom callbacks
this.hammer.on('tap', (e) => { this.onTap(e) })
this.hammer.on('pan', (e) => { this.onPan(e) })
}
}
onTap(e) {
// get finger position on top card
let propX = (e.center.x - e.target.getBoundingClientRect().left) / e.target.clientWidth
// get degree of Y rotation (+/-15 degrees)
let rotateY = 15 * (propX {
// reset transform properties
this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
}, 100)
}
onPan(e) {
if (!this.isPanning) {
this.isPanning = true
// remove transition properties
this.topCard.style.transition = null
if (this.nextCard) this.nextCard.style.transition = null
// get top card coordinates in pixels
let style = window.getComputedStyle(this.topCard)
let mx = style.transform.match(/^matrix((.+))$/)
this.startPosX = mx ? parseFloat(mx[1].split(', ')[4]) : 0
this.startPosY = mx ? parseFloat(mx[1].split(', ')[5]) : 0
// get top card bounds
let bounds = this.topCard.getBoundingClientRect()
// get finger position on top card, top (1) or bottom (-1)
this.isDraggingFrom = (e.center.y - bounds.top) > this.topCard.clientHeight / 2 ? -1 : 1
}
// calculate new coordinates
let posX = e.deltaX + this.startPosX
let posY = e.deltaY + this.startPosY
// get ratio between swiped pixels and the axes
let propX = e.deltaX / this.board.clientWidth
let propY = e.deltaY / this.board.clientHeight
// get swipe direction, left (-1) or right (1)
let dirX = e.deltaX 0.25 && e.direction == Hammer.DIRECTION_RIGHT) {
successful = true
// get right border position
posX = this.board.clientWidth
} else if (propX < -0.25 && e.direction == Hammer.DIRECTION_LEFT) {
successful = true
// get left border position
posX = - (this.board.clientWidth + this.topCard.clientWidth)
} else if (propY {
// remove swiped card
this.board.removeChild(this.topCard)
// add new card
this.push()
// handle gestures on new top card
this.handle()
}, 200)
} else {
// reset cards position
this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
if (this.nextCard) this.nextCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(0.95)'
}
}
}
push() {
let card = document.createElement('div')
card.classList.add('card')
// add you own content to the cards
if (this.board.firstChild) {
this.board.insertBefore(card, this.board.firstChild)
} else {
this.board.append(card)
}
}
}
js麻将叠牌轮播插件的github网址为：
