hammer.js---拖動滑塊實現驗證的小demo
阿新 • • 發佈:2019-02-20
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();
2017/8/24 號更新
css檔案
body{ font-family:"Helvetica","Microsoft Yahei"; padding:0; margin:0; } .grid{ background-image:-webkit-linear-gradient(top, transparent 49px, #bfbebe 50px), -webkit-linear-gradient(left, transparent 49px, #bfbebe 50px); background-size:50px 50px; background-repeat:repeat; } .description{ text-align:center; } .hammer{ width:200px; height:100px; background-color:grey; margin:0 auto; text-align:center; line-height:100px; } .indicator-container{ position:relative; width:100%; height:300px; border:1px solid black; box-sizing:border-box; } .indicator{ position:absolute; width:50px; height:50px; line-height:50px; text-align:center; background-color:#4CAF50; color:white; text-align:center; z-index:2; } .trap{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:50px; height:50px; background-color:grey; } .handsome{ font-size:20px; display:none; }