话不多说,直接上代码:

效果展示

代码实现

注意:本代码仅在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>