一.移动端触摸事件的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>
扫一扫
2107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
