极客观点
项目管理
HarmonyOS
原本是做一个图片拖动的小例子,但是发现图片在手指触摸到开始移动的瞬间会错位偏移,但是后面还是能拖动;
html代码:
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541232625&di=e713ce2bf4b01d5484e31810ed0c97c0&imgtype=jpg&er=1&src=http%3A%2F%2Ftx.haiqq.com%2Fuploads%2Fallimg%2F150327%2F211551I17-12.jpg" style="width:100px;" class="small-pic">
<div class="mask">
<img src="" alt="" class="big-pic" style="max-width: 100%;">
</div>
</body>css部分
.mask{
position: fixed;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,.8);
top: 0;
left: 0;
display: none;
}
.big-pic{
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%);
}js 部分
<script type="text/javascript">
function dropImg(obj){
$(obj).on('touchstart',function(event){
var disx=event.originalEvent.changedTouches[0].clientX-$(obj).offset().left;
var disy=event.originalEvent.changedTouches[0].clientY-$(obj).offset().top;
var moveFlag=true;
$(document).on('touchmove',function(event){
event.preventDefault();
if(moveFlag){
$(obj).css({
"left":event.originalEvent.changedTouches[0].clientX - disx,
"top":event.originalEvent.changedTouches[0].clientY - disy
});
}
});
$(document).on('touchend',function(){
moveFlag=false;
})
});
}
$(document).ready(function() {
$('.small-pic').on('touchstart',function(){
var tag=$(this).attr('src');
$('.big-pic').attr('src',tag);
$('.mask').show();
var oImg=$('.big-pic')
dropImg(oImg);
})
});
</script>
这里设置完了之后， transform:translate(-50%,-50%); 属性让图片偏离