hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
生活随笔
收集整理的這篇文章主要介紹了
hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
hammer.js 的使用。 （手機手勢插件）
捏合、捏開、圖片放大 的一個手機圖片“放大縮小可拖動”的小效果。
相關js 到http://www.bootcdn.cn/ 查找和下載。 hammer.js的版本是v2.0.4
效果說明：
1、（捏開——這個詞我不知道咋說了）就是觸屏后，雙指向外展開。
圖片放大到2倍。
并且計算當前的事件點，以此為中心，在屏幕原處放大。（實際上以左上角為中心，然后計算偏移量）
2、捏合
圖片縮小回原始狀態
3、放大后的滑動事件
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
注意這句話。剛開始沒加這句話的時候，發現 swipeleft 和 swiperight 事件好用，但swipeup 和 swipedown 無效
開始時還想用 pan 事件，但 pan事件是拖動，它需要更多的時間
另外還加了判斷，所以只有scale放大到2倍時，才能使用滑動事件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Pinch</title>
<script src="script/jquery.min.js"></script>
<script src="script/hammer.min.js"></script>
<style type="text/css">
html, body {width:100%;height:100%;margin:0;padding:0;}
.pinch-zoom-container {overflow: hidden;position: relative;}
.pinch-zoom, .pinch-zoom-container {width: 100%!important;height: 100%!important;}
.pinch-zoom{position:absolute;}
.pinch-zoom img{position:absolute;width:100%;left:50%;top:50%;}
</style>
</head>
<body>
<!-- ***************************** -->
<div class="pinch-zoom-container">
<div class="pinch-zoom" id="test" data-scale="1">
<img src="2.jpg" id="testimg">
</div>
</div>
<!-- ***************************** -->
<script type="text/javascript">
$(function(){
$("img").load(function(){
$(this).css("marginLeft",(-1*$(this).width()/2)+"px");
$(this).css("marginTop",(-1*$(this).height()/2)+"px");
});
//創建一個新的hammer對象并且在初始化時指定要處理的dom元素
var hammertime = new Hammer($(".pinch-zoom")[0]);
//var hammertime = new Hammer(document.getElementById("test"));
hammertime.get('pinch').set({ enable: true });
hammertime.add(new Hammer.Pinch());
//hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });//橫向和縱向的swipe事件
hammertime.get('swipe').set({ threshold: 0 });//識別之前所需的最小距離
hammertime.get('swipe').set({ velocity: 0.2 });//識別之前所需的最小距離
//捏開
hammertime.on("pinchout", function (e) {
console.log(">>>>>>>>>>>>>>>>");
var W = $("#testimg").width();
var H = $("#testimg").height();
var scale = 2;
//var mouseX=e.pageX;//鼠標
//var mouseY=e.pageY;
var mouseX=e.center.x;//捏開點
var mouseY=e.center.y;
if($("#test").attr("data-scale")==1){
var translateX=0;
var translateY=0;
//計算當前點擊點相對于圖片的偏移比例
var posX = mouseX/W;
var posY = mouseY/H;
translateX= (W * posX / scale) * -1;
translateY= (H * posY / scale) * -1;
console.log("###["+translateX+"]###");
$("#test").css("transformOrigin","0% 0%");
$("#test").css("transform","scale(2,2) translate("+translateX+"px, "+translateY+"px)");
$("#test").attr("data-x",translateX);
$("#test").attr("data-y",translateY);
$("#test").attr("data-scale",2);
console.log("點擊點的百分比>>> "+posX+","+posY+" ");
console.log("偏移>>> "+translateX+","+translateY+" ");
//console.log("鼠標："+mouseX+","+mouseY+" ");
//console.log("捏開開開開>>>> " + e.center.x + "," + e.center.y+" ");
//console.log("x————————"+ $("#test").attr("data-x") );
//onsole.log("y————————"+ $("#test").attr("data-y") );
}
});
//捏合
hammertime.on("pinchin", function (e) {
$("#test").css("transformOrigin","scale(1,1)");
$("#test").css("transform","scale(1,1) translate(0px,0px)");
$("#test").attr("data-x",0);
$("#test").attr("data-y",0);
$("#test").attr("data-scale",1);
console.log("捏合合合合>> " );
});
function move123(x,y){
//console.log($("#test").attr("data-scale")+"【】【】")
if($("#test").attr("data-scale")==2){
var W = $("#testimg").width();
var H = $("#testimg").height();
var winW = $(document).width();
var winH = $(document).height();
var marginTop = (winH - H) * -1/2;
var marginLeft = winW * -1/2 ;
var marginBottom = -1 * ( winH / 2 -(-1 * marginTop));
//console.log("marginTop="+marginTop);
//console.log("marginBottom="+marginBottom);
var translateX = $("#test").attr("data-x");
var translateY = $("#test").attr("data-y");
translateX = parseFloat(translateX) + x;
translateY = parseFloat(translateY) + y;
//console.log("marginBottom————::: "+ marginBottom +" ]");
//console.log("原始的：translateX = "+ translateX + " " +"translateY = " + translateY);
if(translateX>0){translateX=0;console.log("分支: 左往右撥動");}
if( translateX < marginLeft ){translateX = marginLeft;console.log("分支: 右往左撥動");}
if( translateY < marginTop ){translateY = marginTop;console.log("分支: 下往上撥動");}
if( translateY > marginBottom ){translateY = marginBottom;console.log("分支: 上往下撥動");}
//console.log("改了的：translateX = "+ translateX + " " +"translateY = " + translateY);
$("#test").css("transform","scale(2,2) translate("+translateX+"px, "+translateY+"px)");
$("#test").attr("data-x",translateX);
$("#test").attr("data-y",translateY);
$("#test").attr("data-scale",2);
}
}
hammertime.on("swipe", function (e) {
//console.log("事件發生點(deltaX) x: "+e.deltaX + "(deltaY) y: "+e.deltaY);
if($("#test").attr("data-scale")==2){
//console.log("拖動結束 " + e.deltaX + "," + e.deltaY);
move123(e.deltaX,e.deltaY);
}
});
});
</script>
</body>
</html>
............
總結
以上是生活随笔為你收集整理的hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP UI5故障排查 - why I
- 下一篇： 统计学_Wilcoxon signed-