当前位置: 首页 > Web前端 > HTML

移动端触控滑动垂直图片滚动小部件~

时间:2023-04-02 18:39:49 HTML

老规矩~先上DEMO,玩得开心:纵向图片滚动(不过这个demo需要手机端看~)然后上传源码:纵向滚动图片DEMO很简单,有个纵向图片编号左侧和当前图片索引显示,然后整体是一个垂直可触摸的滑动列表,可以自定义滑动回调函数。1.先说原理。首先,图片必须竖排,如下图。灰色方块是一堆垂直排列的图片。红框为显示区域,隐藏溢出,然后动态改变框内的div。top值来切换不同图片在方框内显示~2.代码首先初始化容器的高度,并添加一个垂直控制条LONG_DISTANCE=nelsonVS.minHeight/2;for(vari=0;iDISTANCE){EVENT_TYPE="DOWN";}elseif(DIS<-DISTANCE){EVENT_TYPE="UP";}if(Math.abs(DIS)>DISTANCE){if(TIMESTAMP_END-TIMESTAMPLONG_DISTANCE){that.checkAction(EVENT_TYPE);}else{that.action(EVENT_TYPE);}}}else{that.action();}})检测滑动方向以及临界值判定if((et=="UP"&&(nelsonVS.index-1)<=-nelsonVS.num)||(et=="DOWN"&&(nelsonVS.index+1)>0)){这个动作();返回;}switch(et){case'UP':nelsonVS.isSliding=true;nelsonVS.index--;这个动作(等);休息;案例“向下”:nelsonVS.index++;nelsonVS.isSliding=true;这个动作(等);休息;默认值:this.action();}}用于滚动varAIM_POS=nelsonVS.minHeight*nelsonVS.index;varDIS=AIM_POS-nelsonVS.ul.offsetTop;var速度=(DIS)/3;那个=这个;that.moveInterval=setInterval(function(){nelsonVS.ul.style.top=nelsonVS.ul.offsetTop+speed+"px";if(Math.abs(AIM_POS-nelsonVS.ul.offsetTop)