hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
生活随笔
收集整理的這篇文章主要介紹了
hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
hammer.js 的使用。 （手機(jī)手勢(shì)插件）
捏合、捏開(kāi)、圖片放大 的一個(gè)手機(jī)圖片“放大縮小可拖動(dòng)”的小效果。
相關(guān)js 到http://www.bootcdn.cn/ 查找和下載。 hammer.js的版本是v2.0.4
效果說(shuō)明：
1、（捏開(kāi)——這個(gè)詞我不知道咋說(shuō)了）就是觸屏后，雙指向外展開(kāi)。
圖片放大到2倍。
并且計(jì)算當(dāng)前的事件點(diǎn)，以此為中心，在屏幕原處放大。（實(shí)際上以左上角為中心，然后計(jì)算偏移量）
2、捏合
圖片縮小回原始狀態(tài)
3、放大后的滑動(dòng)事件
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
注意這句話。剛開(kāi)始沒(méi)加這句話的時(shí)候，發(fā)現(xiàn) swipeleft 和 swiperight 事件好用，但swipeup 和 swipedown 無(wú)效
開(kāi)始時(shí)還想用 pan 事件，但 pan事件是拖動(dòng)，它需要更多的時(shí)間
另外還加了判斷，所以只有scale放大到2倍時(shí)，才能使用滑動(dòng)事件
<!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");
});
//創(chuàng)建一個(gè)新的hammer對(duì)象并且在初始化時(shí)指定要處理的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 });//識(shí)別之前所需的最小距離
hammertime.get('swipe').set({ velocity: 0.2 });//識(shí)別之前所需的最小距離
//捏開(kāi)
hammertime.on("pinchout", function (e) {
console.log(">>>>>>>>>>>>>>>>");
var W = $("#testimg").width();
var H = $("#testimg").height();
var scale = 2;
//var mouseX=e.pageX;//鼠標(biāo)
//var mouseY=e.pageY;
var mouseX=e.center.x;//捏開(kāi)點(diǎn)
var mouseY=e.center.y;
if($("#test").attr("data-scale")==1){
var translateX=0;
var translateY=0;
//計(jì)算當(dāng)前點(diǎn)擊點(diǎn)相對(duì)于圖片的偏移比例
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("點(diǎn)擊點(diǎn)的百分比>>> "+posX+","+posY+" ");
console.log("偏移>>> "+translateX+","+translateY+" ");
//console.log("鼠標(biāo)："+mouseX+","+mouseY+" ");
//console.log("捏開(kāi)開(kāi)開(kāi)開(kāi)>>>> " + 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("分支: 左往右撥動(dòng)");}
if( translateX < marginLeft ){translateX = marginLeft;console.log("分支: 右往左撥動(dòng)");}
if( translateY < marginTop ){translateY = marginTop;console.log("分支: 下往上撥動(dòng)");}
if( translateY > marginBottom ){translateY = marginBottom;console.log("分支: 上往下?lián)軇?dòng)");}
//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("事件發(fā)生點(diǎn)(deltaX) x: "+e.deltaX + "(deltaY) y: "+e.deltaY);
if($("#test").attr("data-scale")==2){
//console.log("拖動(dòng)結(jié)束 " + e.deltaX + "," + e.deltaY);
move123(e.deltaX,e.deltaY);
}
});
});
</script>
</body>
</html>
............
總結(jié)
以上是生活随笔為你收集整理的hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SAP UI5故障排查 - why I
- 下一篇： 统计学_Wilcoxon signed-