用hammer写了个手势，功能可以实现，可是拖动时图片一直是闪烁的，

dq1032373359 2015-10-13 03:43:40

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,width=device-width">
<title>Insert title here</title>
</head>
<style type="text/css">
.dive
{margin-left:10px;width:400px;height:500px
margin-top:10px;
border:1px solid red;text-align:center;}
</style>
<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
<script src="../js/hammer.js"></script>
<body>
<div class="dive" id="div">
<img id="ea" src="../images/pic_ydj.png"/>
</div>
<script>
var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
window.setTimeout(callback,1000 / 60);//1000 / 60
};
})();
var log = null;
var el=document.getElementById("ea");//获取想要放大的图片<img>标签id
var START_X =0;//出现位置设为居中
var START_Y=0;
var ticking = false;
var transform;
var timer;
var mc = new Hammer(el);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
mc.on("panstart panmove", onPan);//拖动事件
mc.on("pinchstart pinchmove", onPinch);//放大缩小事件
mc.on("hammer.input", function(ev) {
if(ev.isFinal) {//判断是否离开，或者事件结束
//resetElement();

START_X=transform.translate.x;//把当前拖动到的坐标赋值给中间变量
START_Y=transform.translate.y;
}
});
function onPan(ev) {
var tx,ty;
var Of= $(el).offset();
var left=Of.left;
var top=Of.top;
var width=$(el).width();
var height=$(el).height();
var right=left+width;
var bottom=top+height;
var width1=$(window).width();
//console.log('top: '+top);
//var li=$('#show_magazine_ul').offset();
var li=$(el).parent().offset();
var litop=li.top;
var lileft=li.left;
var liwidth=$(el).parent().width();
var liheight=$(el).parent().height();
var liright=lileft+liwidth;
//var liright=pageXOffset+width1;
var libottom=litop+liheight;
console.log('lileft: '+lileft);
console.log('left: '+left);
console.log('width'+width);
console.log('liright: '+liright);
if((left>lileft)&&(ev.deltaX<0)){
if(Math.abs(ev.deltaX)>Math.abs(left-lileft))
{tx=lileft-left}
else {tx=ev.deltaX}
transform.translate = {
x: START_X + tx,
y: START_Y
};
}
if((right<liright)&&(ev.deltaX>0)){
if(Math.abs(ev.deltaX)>Math.abs(right-liright))
{tx=liright-right}
else {tx=ev.deltaX}
transform.translate = {
x: START_X + tx,
y: START_Y
};
}
if((top>litop)&&(ev.deltaY<0)){
if(Math.abs(ev.deltaY)>Math.abs(top-litop))
{ty=litop-top}
else {ty=ev.deltaY}
transform.translate = {
x: START_X ,
y: START_Y+ ty
};
}
if((bottom<libottom)&&(ev.deltaY>0)){
if(Math.abs(ev.deltaY)>Math.abs(bottom-libottom))
{ty=libottom-bottom}
else {ty=ev.deltaY}
transform.translate = {
x: START_X ,
y: START_Y+ ty
};
}
console.log("tx:"+tx);
console.log("ty:"+ty);
requestElementUpdate();
}
var initScale = 1;
function onPinch(ev) {
if(ev.type == 'pinchstart') {
initScale = transform.scale || 1;
}
el.className = '';
transform.scale = initScale * ev.scale;
requestElementUpdate();
}
resetElement();

function resetElement() {
el.className = 'animate';
transform = {
translate: { x: 0, y: 0 },
scale: 1,
angle: 0,
rx: 0,
ry: 0,
rz: 0
};
requestElementUpdate();
}

function updateElementTransform() {
var value = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale(' + transform.scale + ', ' + transform.scale + ')',
'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
];

value = value.join(" ");
el.textContent = value;
el.style.webkitTransform = value;
el.style.mozTransform = value;
el.style.transform = value;
ticking = false;
}
function requestElementUpdate() {
if(!ticking) {
reqAnimationFrame(updateElementTransform);
ticking = true;
}
}

</script>
</body>
</html>

...全文