jquery寫(xiě)的拖動(dòng)一直抖動(dòng)

拖動(dòng)一直抖個(gè)不停，求原因和解決辦法

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘寶展示圖</title>
    <link rel="stylesheet" href="pei.css" type="text/css">
</head>

<body>
    <div id="showBox">
        <div id="show_1" style="background-image:url(./img/img_1.jpg)">
            <div id="moveBox"></div>
        </div>
        <div id="show_2"></div>
        <ul>
            <li style="background-image:url(./img/img_1.jpg)" class="li"></li>
            <li style="background-image:url(./img/img_2.jpg)"></li>
            <li style="background-image:url(./img/img_3.jpg)"></li>
            <li style="background-image:url(./img/img_4.jpg)"></li>
            <li style="background-image:url(./img/img_5.jpg)"></li>
            <li style="background-image:url(./img/img_6.jpg)"></li>
        </ul>
    </div>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="pei.js" type="text/javascript"></script>
</body>

</html>

js部分（拖動(dòng)用的f_4）


$(document).ready(function() {
    $('li').on('mouseenter', f_1)

    $('#show_1').on('mouseenter', f_2)

    $('#show_1').on('mouseleave', f_3)

})

function f_1() {
    $('li').removeClass('li');
    $(this).addClass('li');
    var img = $(this).css('background-image');
    $('#show_1').css('background-image', img);
}

function f_2() {
    $('#show_2').css('display', 'inline-block');
    $('#show_1>div').css('display', 'inline-block');
    //$('#show_1').css('position', 'relative');
    $(document).on('mousemove', f_4)
}

function f_3() {
    $('#show_2').css('display', 'none');
    $('#show_1>div').css('display', 'none');
    $(document).off('mousemove', f_4)
}

function f_4(e) {
    //console.log(e.offsetX)
    //console.log(e.offsetY)
    //var lication = $('#show_1>div').position();
    $('#moveBox').css({ top: e.offsetY, left: e.offsetX })
}

回答

編輯回答