我有一张图片,我想在我的 iPad3 上四处移动
问题是它没有我希望的那么好,图像移动不流畅并且在手势后面移动。
我有如下(3MB base64图片)
<img src="data:image/jpeg;base64,/9j/4AAQ....">
CSS:
img {
transform: translate3d(0,0,0);
}
JavaScript 是
img.on('touchstart', function (e) {
var diffX = e.pageX;
var diffY = e.pageY;
img.on('touchmove', function (e) {
translateX += e.pageX - diffX;
translateY += e.pageY - diffY;
img.css({'-webkit-transform': 'translate(' + translateX + 'px, ' + translateY + 'px)'});
diffX = e.pageX;
diffY = e.pageY;
});
return false;
})
...
它在我的笔记本电脑上运行良好,但在我的 iPad3 上运行不佳。 我也试过 requestAnimationFrame,但在我停止移动之前什么也没有发生。有什么建议可以提高我的 iPad 的性能吗?
最佳答案
这完成了 touchmove 函数之外的大部分数学运算 并直接设置 webkittransform 而无需传递很长的 jquery css 函数。 它还使用 3d 过渡女巫没有正确设置,只是在 ios7 的 css 文件中添加 translate3d
var sx,sy,cx=0,cy=0,img=document.images[0];
img.addEventListener('touchstart',ts,false);
img.addEventListener('touchmove',tm,false);
img.addEventListener('touchend',te,false);
function ts(e){
e.preventDefault();
sx=e.pageX-cx;
sy=e.pageY-cy;
}
function tm(e){
this.style.webkitTransform='translate3d('+
(e.pageX-sx)+'px,'+(e.pageY-sy)+'px,0)';
}
function te(e){
cx=e.pageX-sx;
cy=e.pageY-sy;
}
另一点是……即使你有 ipad 3,它也无法处理这样的大图像,因此请考虑将所有内容放入 div
中,并设置 overflow:hidden
这也会提高性能。
div{
width:400px;/*try 100%*/
height:400px;/*try 100%*/
overflow:hidden;
}
鼠标移动示例(不是触摸,但它是一样的,除了你不需要 isup 检查)
关于javascript - 在 iPad 上使用 touchmove 移动图像(css3 变换),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20620016/