hammer.js---拖动滑块实现验证的小demo

来源：互联网发布：excel2010数据分析工具编辑：程序博客网时间：2024/05/21 14:47

1.先看一下效果图

移动端实现，简单方便，只要稍作修改比如用Math.random()函数生成一个随机的位置，然后判断位置差即可。

快去试一试这个很fashion的库吧。

2.看一下HTML结构

<div class="indicator-container"><div class="indicator">slider</div><div class="trap"></div></div><div class="handsome">Oh！You are so handsome!</div>

3.JS部分

function indicatorPan(){var hammer=new Hammer($(".indicator").get(0));hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });var pos_x=$(".indicator").position().left;var pos_y=$(".indicator").position().top;console.log(pos_x);console.log(pos_y);hammer.on("pan",function(e){     // console.log(e);// console.log(e.deltaX);// console.log(e.deltaY);$(".indicator").css("left",pos_x+e.deltaX);$(".indicator").css("top",pos_y+e.deltaY);});var container_width=$(".indicator-container").width();var container_height=$(".indicator-container").height();hammer.on("panend",function(){pos_x=$(".indicator").position().left;pos_y=$(".indicator").position().top;console.log(pos_x);console.log(pos_y);console.log("panend");console.log(Math.abs(pos_x-container_width/2));if(Math.abs(pos_x-container_width/2)<50 &&Math.abs(pos_y-container_height/2)<50){console.log("good");$(".handsome").show();}else{$(".handsome").hide();}});}indicatorPan();

0 0