html手指滑动线条跟随,图片跟随手指滑动

touch事件，给你个简单的事例吧，返回动画什么的你自己完成吧，我是直接返回的。

*{

margin: 0;

padding: 0;

}

html{

width: 100%;

height: 100%;

}

body{

width: 100%;

height: 100%;

position: relative;

/* touch-action: none; */

}

.box{

width: 100px;

height: 100px;

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

background: #000;

}

touch('box');

function touch(id){

var obj = document.getElementById(id);

obj.addEventListener('touchstart', function(event) {

// 如果这个元素的位置内只有一个手指的话

if (event.targetTouches.length == 1) {

var touch = event.targetTouches[0];

// 把元素放在手指所在的位置

var disX=touch.pageX-obj.offsetLeft;

var disY=touch.pageY-obj.offsetTop;

obj.addEventListener('touchmove',move);

function move(event){

//event.preventDefault();

document.documentElement.style.touchAction = 'none';

var touch2=event.targetTouches[0];

//var l=touch2.pageX-disX;

var t=touch2.pageY-disY;

// if(l<0){

//     l=0;

// };

// if(l>document.documentElement.clientWidth-obj.offsetWidth){

//     l=document.documentElement.clientWidth-obj.offsetWidth

// };

if(t<0){

t=0;

};

if(t>document.documentElement.clientHeight-obj.offsetHeight){

t=document.documentElement.clientHeight-obj.offsetHeight;

};

//obj.style.left=l+'px';

obj.style.top=t+'px';

};

obj.addEventListener('touchend',chend);

function chend(event){

if(obj.offsetTop<150){

alert('成功');

obj.style.top='auto';

obj.style.bottom='0px';

}else{

obj.style.top='auto';

obj.style.bottom='0px';

};

document.documentElement.style.touchAction = 'auto';

obj.removeEventListener('touchmove',move);

obj.removeEventListener('touchend',chend);

};

};

}, false);

};