在iPad上使用touchmove移动图像(css3变换)
Move image around (css3 transform) with touchmove on iPad
我有一张想在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;
}
另一点是。。。即使你有iPad3,它也无法处理这样的大图像,所以可以考虑将所有图像都放在带有overflow:hidden
的div
中,这也会提高性能。
div{
width:400px;/*try 100%*/
height:400px;/*try 100%*/
overflow:hidden;
}
鼠标移动示例(不触摸,但除了不需要isup检查外,它是一样的)
http://jsfiddle.net/AtBUh/
相关文章:
- CSS3动画图像质量按比例
- 仅限滑动图像css3或需要javascript
- 在iPad上使用touchmove移动图像(css3变换)
- 使用css3在图像上生成轮廓效果
- CSS3-如何交叉显示未知高度的图像,并将其垂直和水平居中
- css3在背景图像上的转换没有'不适用于Firefox
- CSS3 图像淡入
- 具有弹性图像效果的动画(CSS3和JS)
- CSS3 将图像缩放到容器中心
- 如何使用 CSS3 设置 ul 背景图像淡入
- 如何在 js 和 css3 中使用鼠标光标单击实现滚动图像
- 非CSS3浏览器的JS中的CSS3图像旋转微调器
- 点击查看大图像javascript或CSS3
- CSS3动画在不滑动的情况下更改背景图像
- 如何使用CSS3/JS标记图像中的不同部分
- 将2D画布(图像+文本)应用于3D表面,并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- 使用CSS3或JS对图像进行不透明度淡入淡出
- 在HTML5/CSS3/Javascript应用程序中使用SVG图像的首选方式是什么?
- 使用css3滑动图像
- Html5, js和css3图像裁剪工具