话不多说,直接上代码:
效果展示
代码实现
注意:本代码仅在chrome上测试(版本 76.0.3809.100(正式版本)snap (64 位))。
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
border-radius: 50px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SingleItem</title>
<script>
document.onmousemove = function (ev) {
var oEvent = ev || event;
var oDiv = document.getElementById('div1');
oDiv.style.left = oEvent.clientX + 'px';
oDiv.style.top = oEvent.clientY + 'px';
};
</script>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
function touchMoveFunc(ev) {
var oEvent = ev || event;
var oDiv = document.getElementById('div1');
oDiv.style.left = oEvent.touches[0].pageX - 50 + 'px';
oDiv.style.top = oEvent.touches[0].pageY - 50 + 'px';
};
window.onload = function () {
document.addEventListener('touchmove', touchMoveFunc, false);
}
</script>
</body>
</html>