<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟着手指动</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="./js/jquery-2.1.4.min.js"></script>
</head>
<style>
.circleIcon {
position: fixed;
bottom: 12%;
right: 12px;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
.addIcon {
width: 25px;
height: 25px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12px;
margin-top: -12px;
/* transform: translate(-50% -50%); */
}
</style>
<body>
<div class="box"></div>
<div class="circleIcon" id="go" @click="go">
<!-- <img class="addIcon" src="" alt=""> -->
</div>
</body>
</html>
<script>
for (var i = 0; i < 50; i++) {
$('.box').append('<div>这是一行字</div>');
}
// 去个人中心页图标跟着手走效果
var goMy = document.getElementById('go');
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var endTouchY = 0;
var endTouchX = 0;
var downTime = 0;
goMy.addEventListener('touchstart', function(ev) {
downTime = Date.now();
var ev = ev.touches[0];
endTouchX = ev.clientX;
endTouchY = ev.clientY;
this.addEventListener('touchmove', function(ev) {
// console.log('走')
ev.preventDefault();
var ev = ev.touches[0];
endTouchX = ev.clientX;
endTouchY = ev.clientY;
var moveX = (endTouchX - 25) > 0 ? (endTouchX - 25) : 0;
var moveY = (endTouchY - 25) > 0 ? (endTouchY - 25) : 0;
moveX = (moveX > (winWidth - 50)) ? (winWidth - 50) : moveX;
moveY = (moveY > (winHeight - 50)) ? (winHeight - 50) : moveY;
goMy.style.left = moveX + 'px';
goMy.style.top = moveY + 'px';
}, false);
this.addEventListener('touchend', function(ev) {
this.ontouchmove = null;
this.ontouchend = null;
if (Date.now() - downTime < 300) {
// window.location.href = "/info";
return;
}
var x = (endTouchX - 25) > 0 ? (endTouchX - 25) : 0;
var y = (endTouchY - 25) > 0 ? (endTouchY - 25) : 0;
x = (x > (winWidth - 50)) ? (winWidth - 50) : x;
y = (y > (winHeight - 50)) ? (winHeight - 50) : y;
goMy.style.left = x + 'px';
goMy.style.top = y + 'px';
}, false);
}, false);
</script>
