js扑克堆叠式卡片轮播图插件

作者：管理员

发布时间：2020/2/26 17:10:56

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=896

　　简要教程

　　这是一款js扑克堆叠式卡片轮播图插件。高轮播图的所有图片像扑克牌一样堆叠在一起，通过鼠标拖拽最上面的一张图片，就可以显示出下一张图片来。

　　使用方法

　　在HTML文件中引入。

　　<scriptsrc="//code.jquery.com/hammer.min.js"></script>

　　HTML结构

　　<divid="board"></div>

　　初始化插件

　　然后通过下面的代码来初始化插件。

　　classCarousel{

　　constructor(element){

　　this.board=element

　　//addfirsttwocardsprogrammatically

　　this.push()

　　this.push()

　　//handlegestures

　　this.handle()

　　}

　　handle(){

　　//listallcards

　　this.cards=this.board.querySelectorAll('.card')

　　//gettopcard

　　this.topCard=this.cards[this.cards.length-1]

　　//getnextcard

　　this.nextCard=this.cards[this.cards.length-2]

　　//ifatleastonecardispresent

　　if(this.cards.length>0){

　　//setdefaulttopcardpositionandscale

　　this.topCard.style.transform='translateX(-50%)translateY(-50%)rotate(0deg)rotateY(0deg)scale(1)'

　　//destroypreviousHammerinstance,ifpresent

　　if(this.hammer)this.hammer.destroy()

　　//listenfortapandpangesturesontopcard

　　this.hammer=newHammer(this.topCard)

　　this.hammer.add(newHammer.Tap())

　　this.hammer.add(newHammer.Pan({position:Hammer.position_ALL,threshold:0}))

　　//passeventsdatatocustomcallbacks

　　this.hammer.on('tap',(e)=>{this.onTap(e)})

　　this.hammer.on('pan',(e)=>{this.onPan(e)})

　　}

　　}

　　onTap(e){

　　//getfingerpositionontopcard

　　letpropX=(e.center.x-e.target.getBoundingClientRect().left)/e.target.clientWidth

　　//getdegreeofYrotation(+/-15degrees)

　　letrotateY=15*(propX<0.05?-1:1)

　　//changethetransitionproperty

　　this.topCard.style.transition='transform100msease-out'

　　//rotate

　　this.topCard.style.transform='translateX(-50%)translateY(-50%)rotate(0deg)rotateY('+rotateY+'deg)scale(1)'

　　//waittransitionend

　　setTimeout(()=>{

　　//resettransformproperties

　　this.topCard.style.transform='translateX(-50%)translateY(-50%)rotate(0deg)rotateY(0deg)scale(1)'

　　},100)

　　}

　　onPan(e){

　　if(!this.isPanning){

　　this.isPanning=true

　　//removetransitionproperties

　　this.topCard.style.transition=null

　　if(this.nextCard)this.nextCard.style.transition=null

　　//gettopcardcoordinatesinpixels

　　letstyle=window.getComputedStyle(this.topCard)

　　letmx=style.transform.match(/^matrix\((.+)\)$/)

　　this.startPosX=mx?parseFloat(mx[1].split(',')[4]):0

　　this.startPosY=mx?parseFloat(mx[1].split(',')[5]):0

　　//gettopcardbounds

　　letbounds=this.topCard.getBoundingClientRect()

　　//getfingerpositionontopcard,top(1)orbottom(-1)

　　this.isDraggingFrom=(e.center.y-bounds.top)>this.topCard.clientHeight/2?-1:1

　　}

　　//calculatenewcoordinates

　　letposX=e.deltaX+this.startPosX

　　letposY=e.deltaY+this.startPosY

　　//getratiobetweenswipedpixelsandtheaxes

　　letpropX=e.deltaX/this.board.clientWidth

　　letpropY=e.deltaY/this.board.clientHeight

　　//getswipedirection,left(-1)orright(1)

　　letdirX=e.deltaX<0?-1:1

　　//calculaterotation,between0and+/-45deg

　　letdeg=this.isDraggingFrom*dirX*Math.abs(propX)*45

　　//calculatescaleratio,between95and100%

　　letscale=(95+(5*Math.abs(propX)))/100

　　//movetopcard

　　this.topCard.style.transform='translateX('+posX+'px)translateY('+posY+'px)rotate('+deg+'deg)rotateY(0deg)scale(1)'

　　//scalenextcard

　　if(this.nextCard)this.nextCard.style.transform='translateX(-50%)translateY(-50%)rotate(0deg)rotateY(0deg)scale('+scale+')'

　　if(e.isFinal){

　　this.isPanning=false

　　letsuccessful=false

　　//setbacktransitionproperties

　　this.topCard.style.transition='transform200msease-out'

　　if(this.nextCard)this.nextCard.style.transition='transform100mslinear'

　　//checkthreshold

　　if(propX>0.25&&e.direction==Hammer.DIRECTION_RIGHT){

　　successful=true

　　//getrightborderposition

　　posX=this.board.clientWidth

　　}elseif(propX<-0.25&&e.direction==Hammer.DIRECTION_LEFT){

　　successful=true

　　//getleftborderposition

　　posX=-(this.board.clientWidth+this.topCard.clientWidth)

　　}elseif(propY<-0.25&&e.direction==Hammer.DIRECTION_UP){

　　successful=true

　　//gettopborderposition

　　posY=-(this.board.clientHeight+this.topCard.clientHeight)

　　}

　　if(successful){

　　//throwcardinthechosendirection

　　this.topCard.style.transform='translateX('+posX+'px)translateY('+posY+'px)rotate('+deg+'deg)'

　　//waittransitionend

　　setTimeout(()=>{

　　//removeswipedcard

　　this.board.removeChild(this.topCard)

　　//addnewcard

　　this.push()

　　//handlegesturesonnewtopcard

　　this.handle()

　　},200)

　　}else{

　　//resetcardsposition

　　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(){

　　letcard=document.createElement('div')

　　card.classList.add('card')

　　//addyouowncontenttothecards

　　if(this.board.firstChild){

　　this.board.insertBefore(card,this.board.firstChild)

　　}else{

　　this.board.append(card)

　　}

　　}

　　}

关键字：jQuery