手指触摸及大小控制

最新推荐文章于 2022-08-01 15:49:53 发布

uhhuh-495

最新推荐文章于 2022-08-01 15:49:53 发布

阅读量317

点赞数

分类专栏：功能（方法）实现案例文章标签：触摸移动端 JavaScrip 前端

本文链接：https://blog.csdn.net/weixin_42166007/article/details/96623319

版权

功能（方法）实现案例专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>touch测试</title>
	<link rel="stylesheet" type="text/css" href="css/touch.css">
</head>
<body>
	<div class="touch_box">
		<p class="p1">start</p>
		<p class="p2">move</p>
		<p class="p3">end</p>
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
</html>

Css：

*{
	margin: 0;
	padding: 0;
}
.touch_box{
	width: 100%;
	height: 500px;
	background-color: #3ca5b3;
	text-align: center;
	overflow: hidden;
}
.touch_box p{
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px;
    font-size: 24px;
    width: 50%;
    color: #fff;
}
.p1{
	background-color: #666;
}
.p2{
	background-color: #888;
}
.p3{
	background-color: #101
}

Js：

/*
//根据不同设备设置不同大小
$(function(){
    $(document).ready(function(){
        updata_html_size(7.527);
    });
    $(document).resize(function(){
        updata_html_size(7.527);
    });
    function updata_html_size(init_size){
        var width = $(window).width();
        if(width>=640)
        {
            width = 640;
        }
        var w = width/init_size;
        $('html').css('font-size',w.toFixed(2)+'px');
    }
})
*/

var start,move,end;
/*
touches ：当前位于屏幕上的所有手指的一个列表。
targetTouches ：位于当前DOM元素上的手指的一个列表。
changedTouches ：涉及当前事件的手指的一个列表。
*/

/*原生写法*/
var box = $(".touch_box")[0];
var p1 = $(".touch_box .p1");
var p2 = $(".touch_box .p2");
var p3 = $(".touch_box .p3");
//点触开始--begin
box.addEventListener("touchstart", function (e){
	// 记录开始按下时的点
    var touches = event.touches[0];
    start = { 
        /*
        screenX,screenY:触摸点相对于屏幕上边缘的坐标;
        clientX,clientY:触摸点相对于浏览器的viewport左边缘的坐标,不会包括左边的滚动距离;
        pageX,pageY:触摸点相对于document的左边缘的坐标,与clientX不同的是,他包括左边滚动的距离,如果有的话;
        target:总是表示 手指最开始放在触摸设备上的触发点所在位置的element;
        toFixed(x)：转换为有x位小数的数据;
        */
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
	p1.html("触摸开始："+ e.target.tagName + "-" + "(" + start.x + "," + start.y + ")");
});
//点触开始--end

//点触移动--begin
box.addEventListener("touchmove", function (e){
	//记录移动的距离
	var touches = event.touches[0];
	move = {
        x: (touches.pageX - start.x).toFixed(2),
        y: (touches.pageY - start.y).toFixed(2)
    };
    p2.html("触摸移动："+ e.target.tagName + "-" + "(" + move.x + "," + move.y + ")");
});
//点触移动--end

//点触结束--begin
box.addEventListener("touchend", function (e){
	// 记录开始结束时的点
    var touches = event.changedTouches[0];  //此处不能用"touches[0]"
    end = {  
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
    p3.html("触摸结束："+ e.target.tagName + "-" + "(" + end.x + "," + end.y + ")");
})
//点触结束--end

/*
//Jq写法
//点触开始--begin
$(".touch_box").on('touchstart',function(e) {
	var touches = e.originalEvent.targetTouches[0]; 
	start = { 
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
	$(".touch_box .p1").html("触摸开始：(" + start.x + "," + start.y + ")");
});
//点触开始--end

//点触移动--begin
$(".touch_box").on('touchmove',function(e) {
	var touches = e.originalEvent.targetTouches[0]; 
    move = {
        x: (touches.pageX - start.x).toFixed(2),
        y: (touches.pageY - start.y).toFixed(2)
    };
    $(".touch_box .p2").html("触摸移动：(" + move.x + "," + move.y + ")");
});
//点触移动--end

//点触结束--begin
$(".touch_box").on('touchend',function(e) {
	var touches = e.originalEvent.changedTouches[0];   //此处不能用"targetTouches[0]"
    end = {  
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
    $(".touch_box .p3").html("触摸结束：(" + end.x + "," + end.y + ")");
})
//点触结束--end
*/