<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.box{
width:200px;
height:200px;
background-color: rosybrown;
/* position: absolute; */
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
var startX=0;
var startY=0;
var x=0;
box.addEventListener('touchstart',function(e){
startX=e.targetTouches[0].pageX;
console.log(startX)
})
box.addEventListener('touchmove',function(e){
var moveX=e.targetTouches[0].pageX-startX;
console.log(box.offsetLeft);
this.style.transform='translateX('+x+'px)';
this.style.transform='translateX('+moveX+'px)';
console.log(e);
})
box.addEventListener('touchend',function(){
})
</script>
</body>
</html>
為什么移動div 為什么offsetLeft沒有改變?
uj5u.com熱心網友回復：
注意transform的使用uj5u.com熱心網友回復：
<!DOCTYPE html><head>
<style>
*{
padding:0;
margin:0;
}
.aaa{
width: 100%;
position: relative;
}
.box{
width:200px;
height:200px;
background-color: rosybrown;
position: absolute;
}
</style>
</head>
<body>
<div class="aaa">
<div class="box">156</div>
</div>
<script>
var box=document.querySelector('.box');
var startX=0;
var startY=0;
var x=0;
box.addEventListener('touchstart',function(e){
startX=e.targetTouches[0].pageX;
})
box.addEventListener('touchmove',function(e){
var moveX=e.targetTouches[0].pageX-startX;
console.log(box.offsetLeft);
this.style.left=x+'px';
this.style.left=moveX+'px';
})
box.addEventListener('touchend',function(){
})
</script>
</body>
你需要把transform換成left之后才能獲取到值，要不然你就是需要獲取transform的值，而不是offsetLeft
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241677.html
標籤：JavaScript
上一篇：前端萌新請教一個css的寫法
下一篇：正則運算式優化