您的位置：首页 > 移动开发

移动端触摸事件

2017-07-23 16:47 357 查看

一.移动端触摸事件的css部分：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<style>

*{

padding: 0;

margin: 0;

}

#wrap{

position: relative;

width: 100%;

margin: 0 auto;

border: 1px solid red;

}

img{

width: 100%;

vertical-align: bottom;

}

</style>

</head>

二.移动端触摸事件的Html部分：

<body>

<div id="wrap"><img src="img/dengta.jpg" alt="" /></div>

</body>

三.移动端触摸事件的js部分：

<script type="text/javascript">

var wrapObj=document.getElementById("wrap");

var imgObj=document.getElementsByTagName("img")[0];

wrapObj.addEventListener("touchstart", function() {

wrapObj.style.transform="scale(0.5,0.5)";

}, false);

wrapObj.addEventListener("touchmove", function(e) {

var event1=event||e;

var oneTouch=event1.touches[0];

wrapObj.style.left=oneTouch.clientX-0.5*imgObj.offsetWidth+"px";

wrapObj.style.top=oneTouch.clientY-0.5*imgObj.offsetHeight+"px";

}, false);

wrapObj.addEventListener("touchend", function() {

wrapObj.style.transform="scale("+1+","+1+")";

wrapObj.style.left=0;

wrapObj.style.top=0;

}, false);

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Web前端 js逻辑触摸移动 css

相关文章推荐

新的分享

章节导航