-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
<style>
-
*{
-
margin:0;
-
padding:0;
-
}
-
.test_img{
-
position: relative;
-
/*position: absolute;*/
-
}
-
</style>
-
<title>Document</title>
-
</head>
-
<body>
-
<img src="weight1.png" alt="" class="test_img">
-
<p id="touch_tips"><p>
-
<script>
-
JS原生获得手机端手机触摸点坐标并移动图片 方法一
-
window.onload=function(){
-
var img_move=document.getElementsByClassName('test_img')[0];//获得元素DOM
-
var Xstart=0,Ystart=0,Xmove=0,Ymove=0,top=0,left=0; //定义变量
-
img_move.ontouchstart=function(e){
-
var e=e||window.event;
-
Xstart=e.touches[0].clientX;//获得触屏点横坐标
-
Ystart=e.touches[0].clientY;//获得触屏点纵坐标
-
//alert(e.touches.length) 获得当前屏幕上所有手指列表
-
}
-
img_move.ontouchmove=function(e){
-
var e=e||window.event;
-
event.preventDefault();//阻止页面滑动
-
Xmove=e.changedTouches[0].clientX;//获得滑动时的触点横坐标
-
Ymove=e.changedTouches[0].clientY;//获得滑动时的触点纵坐标
-
img_move.style.top=top+Ymove-Ystart+"px";//对图片的下一次滑动操作时的定位
-
img_move.style.left=left+Xmove-Xstart+"px";
-
}
-
img_move.ontouchend=function(){
-
top=parseInt(img_move.style.top);//获得上一次滑动结束后的图片坐标
-
left=parseInt(img_move.style.left);
-
}
-
}
-
-
</script>
-
</body>
-
</html>
-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
<style>
-
*{
-
margin:0;
-
padding:0;
-
}
-
.test_img{
-
position: relative;
-
/*position: absolute;*/
-
}
-
</style>
-
<title>Document</title>
-
</head>
-
<body>
-
<img src="weight1.png" alt="" class="test_img">
-
<p id="touch_tips"><p>
-
<script>
-
// JS原生获得手机端手机触摸点坐标并移动图片 方法二
-
function handleTouchEvent(event) {
-
var output = document.getElementById("output");
-
switch (event.type) {
-
case "touchstart":
-
var e=e||window.event;
-
Xstart=e.touches[0].clientX;
-
Ystart=e.touches[0].clientY;
-
break;
-
case "touchend":
-
top=parseInt(img_move.style.top);
-
left=parseInt(img_move.style.left);
-
break;
-
case "touchmove":
-
var e=e||window.event;
-
event.preventDefault();//阻止页面滚动
-
Xmove=e.changedTouches[0].clientX;
-
Ymove=e.changedTouches[0].clientY;
-
img_move.style.top=top+Ymove-Ystart+"px";
-
img_move.style.left=left+Xmove-Xstart+"px";
-
break;
-
}
-
}
-
var img_move=document.getElementsByClassName('test_img')[0];
-
var Xstart=0,Ystart=0,Xmove=0,Ymove=0,top=0,left=0;
-
document.addEventListener("touchstart", handleTouchEvent, false);
-
document.addEventListener("touchend", handleTouchEvent, false);
-
document.addEventListener("touchmove", handleTouchEvent, false);
-
-
</script>
-
</body>
-
</html>
PS：jquery 手机触屏事件如下：
-
$(function(){
-
$('.test_img').bind({
-
'touchstart' : function(){
-
$('#touch_tips').text('按下或触摸');
-
},
-
'touchmove' : function(e){
-
var e=e||window.event;
-
$('#touch_tips').text('滑动');
-
},
-
'touchend' : function(){
-
$('#touch_tips').text('松开');
-
}
-
})
-
})
阅读(1768) | 评论(0) | 转发(0) |
